วิธีการทำ Css3 HOVER IMAGE แบบบ้านๆ

เทคนนิคการทำ image hover โดยใช้ css3 แบบ เก๋ๆ สำหรับใช่ตกแต่งเว็บ เป็นลูกเล่นที่สามารถนำไปปรับได้หลายแบบครับ ซึ่ง browser สมัยนี้ก็ซัพพอร์ทแทบทั้งหมด ยกเว้น ie ที่ตำกว่า version 9 เอาครับมาเริ่มกันเลยครับ มาดูตัวอย่างจริงกันเลยครับ

เรามาดูตัวอย่างจริงๆกันเลย

เริ่มจาก code ในส่วน html

<div class="overimg">
<a href="http:www.webunique.in.th" class="grow"> 	 
<img src="https://webunique.in.th/blog/wp-content/uploads/2016/05/cropped-slogo-300x300.png" width="100%" />
<div class="tagg">
<div class="fimax">
<h3>เขียนเว็บด้วย Css 3</h3>
<p>ทดสอบ css3</p>
</div>
</div>
</a>
</div>

ในส่วน css ที่เป็นตัวหลักของเราครับ

.overimg{
text-align:center;
position: relative;
display: block;
overflow: hidden;
background:#f39c12;  
}
.overimg a{
width:250px;
position: relative;
display: inline-block;
overflow: hidden;
margin-bottom:-4px;

}       
.overimg img{
  display:block;
}
  
.grow{ transition: all .4s ease-in-out; }
.grow:hover{ transform: scale(1.2);  }
.grow:hover .tagg{

        background:rgba(234,156,18,.8);
        transition: all .4s ease-in-out;
        opacity: 1;
}

.tagg{
    position: absolute;
    top: 0;
    left:0;
    width:100%;
   
   height:100%;
display:block;
 
   
    transition: all .4s ease-in-out;
              
                
                opacity: 0;
}

.fimax{
position: absolute;
display:block;
top: 20%;
width:100%;
text-align: center;
color:#fff;

}
.fimax *{color:#fff;}

หากมีข้อสงสัยสามารถสอบถามได้ครับ