آموزش طراحی افکت Image Overlay Icon برای عکس

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

Image Overlay Icon

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

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

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

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

                    /* Container needed to position the overlay. Adjust the width as needed */
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

/* Make the image to responsive */
.image {
  width: 100%;
  height: auto;
}

/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: red;
}

/* When you mouse over the container, fade in the overlay icon*/
.container:hover .overlay {
  opacity: 1;
}

/* The icon inside the overlay is positioned in the middle vertically and horizontally */
.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

/* When you move the mouse over the icon, change color */
.fa-user:hover {
  color: #eee;
}



                

<h2>Fade in Overlay Icon</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">

  <a href="#" class="icon" title="User Profile">

    <i class="fa fa-user"></i>

  </a>

  </div>

</div>

 

خروجی Image Overlay Icon  

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