آموزش طراحی افکت Image Overlay Title برای تصاویر

در این مقاله می آموزید که چطور با استفاده از CSS و Html همپوشانی تصویر بصورت تیتر در هاور (hover) ایجاد کنیم.

Image Overlay Title

ماوس را روی تصویر حرکت دهید تا افکت همپوشانی را مشاهده کنید.

چگونه افکت همپوشانی تصویر بصورت تیتر ایجاد کنیم.

قدم اول : کد HTML را اضافه کنید.
مثال :

               

  
  
My Name is John



                

قدم دوم :   کد 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;
}




                

<h2>Image Overlay Title</h2>

<p>برای نمایش افکت , نشانگر ماوس را روی تصویر ببرید</p>

<div class="container">

  <img src="http://articles.tahlildadeh.com/image.axd?picture=img_avatar.png" alt="Avatar" class="image">

  <div class="overlay">My Name is John</div>

</div>

 

خروجی Image Overlay Title  

توجه :  در بخش Image Hover Overlayمیتوانید سایر افکت های هم پوشانی تصویر( محو شدن ، اسلایدی و غیره ) را مشاهده کنید.