CSS Transition : Create Image Hover Overlay Effect

How to use the Transition Effects

This tutorial about how to create image hover overlay effects using a CSS Transition.

HTML

In this html code we use a div named example wrapper to wrap all content for transition effect.Image used when we hover over this we will show overlay div.

  <div class="example-wrapper">
   <img src="images/banner.jpg">
<div class="overlay">This is Demo Text</div>
  </div>

CSS

.example-wrapper .inner{
position:relative;
height:323px;
margin:0;
overflow:hidden;
}
.example-wrapper .overlay{
opacity:0;
height:0;
position:relative;
width:100%;  
bottom:0;
left:0;
background-color:rgba(0,0,0,0.8);
-webkit-transition:all .1s ease;-o-transition:all .1s ease;
transition:all .1s ease; color:#fff;
font-size:20px;  
text-align:center;
text-transform:uppercase;}

Apply CSS for Transition Effect

.example-wrapper img{
-webkit-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all .4s ease;
}
.example-wrapper .inner:hover .overlay{
opacity:1;
height:50px;
line-height: 50px;
-webkit-transform:translateY(-50px);
-ms-transform:translateY(-50px);transform:translateY(-50px);
}
.example-wrapper .inner:hover img{
-webkit-transform:translateY(-50px);
-ms-transform:translateY(-50px);
transform:translateY(-50px);
}

Demo

This is Demo Text

Related Articles

Leave a Reply

3 Comments on "CSS Transition : Create Image Hover Overlay Effect"

Notify of
avatar
Sort by:   newest | oldest | most voted
Josphine Ritchlin
Guest

web anda bagus sekali serta cantik, dari informasi dan bentuk webnya sangat mempesona, saya percaya website ini dapat naik dan gempar visitornya tak diperbolehkan gelondong gan pariwara di facebook maupun IG, membludak orang memakai itu gan, saya sarankan coba pakai promosi sms atau iklan gtu pasti ramai

Long Benoist
Guest

web kamu bagus sekali serta cantik, dari informasi dan rancangan webnya amat mempesona, saya yakin website ini sanggup naik dan gempar visitornya janganlah batang kayu gan pariwara di facebook maupun IG, membludak orang memakai itu gan, saya sarankan coba pakai promosi sms atau publisitas gtu mesti ramai

Arturo Gieselman
Guest

web kalian bagus sekali dan juga cantik, dari tulisan dan rancangan webnya amat mempesona, saya percaya website ini dapat naik dan marak visitornya janganlah log gan promosi di facebook maupun IG, berlimpah orang memakai itu gan, saya sarankan coba pakai promosi sms atau advertensi gtu mesti ramai