كيف - عنوان تراكب الصور
تعرف على كيفية إنشاء عنوان تراكب صورة عند التمرير.
عنوان تراكب الصورة
قم بالمرور فوق الصورة لمشاهدة تأثير التراكب.
كيفية إنشاء عنوان صورة تراكب
الخطوة 1) أضف HTML:
مثال
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">My Name is John</div>
</div>
الخطوة 2) أضف CSS:
مثال
* {box-sizing: border-box}
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width:
50%;
max-width: 300px;
}
/* Make the image to responsive */
.image {
display: block;
width: 100%;
height: auto;
}
/*
The overlay effect - lays on top of the container and
over the image */
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0,
0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/* When you mouse over the container, fade
in the overlay title */
.container:hover .overlay {
opacity: 1;
}
نصيحة: راجع أيضًا تأثيرات تراكب الصور الأخرى (التلاشي ، الانزلاق ، إلخ) في How To - Image Hover Overlay .
Go to our CSS Images Tutorial to learn more about how to style images.