Four Linkable Image Hover Effects Demo
Shutter
/*-----Fade Effect-----*/
.ds-hover-3 {
display: inline-block;
position: relative;
}
.ds-hover-3 img {
display: block;
max-width: 100%;
}
.ds-hover-3::before,
.ds-hover-3::after {
opacity: 0;
position: absolute;
width: 90%;
color: #fff;
padding: 5%;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.ds-hover-3::before {
content: attr(ds-title);
top: 0;
height: 10%;
background: rgba(0,0,0,0.5);
font-size: 40px;
text-transform: uppercase;
font-weight: 300;
}
.ds-hover-3::after {
content: attr(ds-desc);
top: 25%;
height: 60%;
width: initial;
background: rgba(255,102,0,0.5);
font-size: 16px;
text-align: right;
}
.ds-hover-3:hover::before,
.ds-hover-3:hover::after {
opacity: 1;
}
Push Right
Fade
Push Left
