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

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

Image Hover Fullscreen Zoom

برای مشاهده افکت بزرگنمایی بر روی تصویر زیر ماوس را حرکت دهید

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

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

                

  
  

    
Hello World
  

                

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

/* Container needed to position the overlay. Adjust the width as needed */
.container {
  position: relative;
  width: 50%;
}

/* 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;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}

/* When you mouse over the container, the overlay text will "zoom" in display */
.container:hover .overlay {
  transform: scale(1);
}

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


                

<h2>Image Hover Fullscreen Zoom</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">

    <div class="text">Hello World</div>

  </div>

</div>

 

خروجی Overlay Zoom Effect