Image Hover Effect Style 3
Change View
Left View
Top View
Right View
Full View
HTML
Multiside Sliding Caption Effect
CSS
body{ font-family: arial,helvetica;} h1{ text-align: center;line-height: 45px} .box{ width: 400px; border: 1px solid #000; margin: 0 auto; padding: 3px; overflow: hidden; } .box-img{ display: block; position: relative; } .box-img img{ width: 100%; height: auto; } .over-layer{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center } .box-img:before, .box-img:after, .box-img .over-layer:before, .box-img .over-layer:after{ content:""; width: 50%; height: 50%; position: absolute; background:rgba(255,255,255,0.4); transition: all 0.40s ease-in-out 0s; } .box .box-img:before{ left: -100%; top:0; } .box:hover .box-img:before{ left:0%; } .box .box-img:after{ right: 0%; top:-100%; background:rgba(255,255,255,0.8); } .box:hover .box-img:after{ right: 0%; top:0%; } .box .over-layer:before{ left:0; bottom: -100%; background:rgba(255,255,255,0.8); } .box:hover .over-layer:before{ bottom: 0%; } .box .over-layer:after{ bottom:0; right: -100%; } .box:hover .over-layer:after{ bottom:0; right: 0%; } .box .over-layer i{ position: relative; top: 40%; font-size: 35px; color:red; z-index: 1; opacity: 0; transition:all 0.40s easy-in-out 0.1s; } .box:hover .over-layer i{ opacity: 1; transition-delay: 0.1s; }
Javascript