دوره‌ای که می‌تونه مسیر شغلیت رو عوض کنه! دوره‌ای که می‌تونه مسیر شغلیت رو عوض کنه!
🎯 ثبت نام

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

آموزش افکت Overlay Zoom Effect


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


Image Hover Fullscreen Zoom


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


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



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


1
2
3
4
5
6
7
                <div class="container">
  <img alt="Avatar" class="image" data-src=" http://articles.tahlildadeh.com/image.axd?picture=img_avatar.png ">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
                <button></button>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* 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;
}
 
 
                <button></button>


نمونه مثال Overlay Zoom Effect:

1
2
3
4
5
6
7
8
9
10
11
<p><h2>Image Hover Fullscreen Zoom</h2><br>
<p>برای دیدن اثر بزرگنمایی ، نشانگر ماوس را روی تصویر ببرید</p></p>
 
<p><div class="container"><br>
  <img src="http://articles.tahlildadeh.com/image.axd?picture=img_avatar.png" alt="Avatar" class="image"><br>
  <div class="overlay"><br>
    <div class="text">Hello World</div><br>
  </div><br>
</div><br>
 </p>
<button></button>
امتحان کنید


خروجی Overlay Zoom Effect  

آموزش Overlay Zoom Effect
1400/01/10 3230 465
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com
نظرات شما

نظرات خود را ثبت کنید...