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

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

Image overlay Fade

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

1. Fade in Overlay

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

                   <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 را اضافه کنید.
مثال :

.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:

<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

2. Opacity with Box

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

<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 را اضافه کنید.
مثال :

.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:

<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

آموزش ساخت گالری تصاویر به صورت Tab آموزش طراحی افکت Image Overlay Slide برای تصاویر

1400/01/08 2335 937

دانلود PDF

دانلود سورس کد

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما