یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی
🎯 ثبت نام

آموزش افکت Image Hover Overlay

آموزش افکت Image Hover Overlay


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


Image overlay Fade


در این مقاله می آموزید که چطور یک افکت محو شدن بر روی یک تصویر در هاور ایجاد کنید.




1. Fade in Overlay


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


1
2
3
4
5
6
7
8
9
10
11
                   <h2>Fade in Overlay</h2>
<p>برای دیدن افکت ، با ماوس روی تصویر هاور کنید</p>
 
<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
.container {
  position: relative;
  width: 50%;
}
 
.image {
  display: block;
  width: 100%;
  height: auto;
}
 
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}
 
.container:hover .overlay {
  opacity: 1;
}
 
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
 
 
<button></button>


نمونه مثال Fade in Overlay:

1
2
3
4
5
6
7
8
9
10
11
<p><br>
<h2>Fade in Overlay</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></p>
<button></button>
امتحان کنید


خروجی Fade in Overlay  

آموزش Fade in Overlay


2. Opacity with Box


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


1
2
3
4
5
6
7
8
9
10
<h2>Opacity with Box</h2>
<p>برای دیدن افکت ، با ماوس روی تصویر هاور کنید</p>
 
<div class="container">
  <img alt="Avatar" class="image" style="width:100%" data-src=" http://articles.tahlildadeh.com/image.axd?picture=img_avatar.png">
  <div class="middle">
    <div class="text">John Doe</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
.container {
  position: relative;
  width: 50%;
}
 
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
 
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
 
.container:hover .image {
  opacity: 0.3;
}
 
.container:hover .middle {
  opacity: 1;
}
 
.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
 
<button></button>


نمونه مثال Opacity with Box:

1
2
3
4
5
6
7
8
9
10
11
12
<p><br>
<h2>Opacity with Box</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" style="width:100%"><br>
  <div class="middle"><br>
    <div class="text">John Doe</div><br>
  </div><br>
</div><br>
  </p>
<button></button>
امتحان کنید


خروجی Opacity with Box  

آموزش Opacity with Box
1400/01/08 2335 937
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com
نظرات شما

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