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

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

Image overlay Fade

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

1. Fade in Overlay

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

                                   
Fade in Overlay
                
برای دیدن افکت ، با ماوس روی تصویر هاور کنید

                

                  
                  

                    
Hello World
                  
                

                

قدم دوم :   کد 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;
                }


                

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

خروجی Fade in Overlay  

2. Opacity with Box

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

                
Opacity with Box
                
برای دیدن افکت ، با ماوس روی تصویر هاور کنید

                

                  
                  

                    
John Doe
                  
                
                

قدم دوم :   کد 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;
                }

                

<h2>Opacity with Box</h2>

<p>برای دیدن افکت ، با ماوس روی تصویر هاور کنید</p>

<div class="container">

  <img src="http://articles.tahlildadeh.com/image.axd?picture=img_avatar.png" alt="Avatar" class="image" style="width:100%">

  <div class="middle">

    <div class="text">John Doe</div>

  </div>

</div>

  

خروجی Opacity with Box