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.
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;}
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);
}
-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
Leave a Reply
3 Comments on "CSS Transition : Create Image Hover Overlay Effect"
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
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
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