Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
#0013 - Image hover effect with multiple icons
<figure class="snip0013">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample32.jpg" alt="sample32"/>
<div>
<a href="#"><i class="ion-ios-star-outline left-icon"></i></a>
<a href="#"><i class="ion-ios-download-outline right-icon"></i></a>
</div>
</figure>
<figure class="snip0013">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample33.jpg" alt="sample33"/>
<div>
<a href="#"><i class="ion-ios-star-outline left-icon"></i></a>
<a href="#"><i class="ion-ios-download-outline right-icon"></i></a>
</div>
</figure>
<figure class="snip0013">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample34.jpg" alt="sample34"/>
<div>
<a href="#"><i class="ion-ios-star-outline left-icon"></i></a>
<a href="#"><i class="ion-ios-download-outline right-icon"></i></a>
</div>
</figure>
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0013 {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 220px;
max-width: 310px;
max-height: 220px;
width: 100%;
background: #000000;
text-align: center;
}
figure.snip0013 img {
max-width: 100%;
opacity: 1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0013 > div {
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
position: absolute;
}
figure.snip0013 > div a {
color: #ffffff;
}
figure.snip0013 > div a i {
font-size: 50px;
opacity: 0;
top: 50%;
position: relative;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
display: inline-block;
}
figure.snip0013 > div a i.left-icon {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
figure.snip0013 > div a i.right-icon {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
figure.snip0013 > div::before {
position: absolute;
top: 30px;
right: 50%;
bottom: 30px;
left: 50%;
border-left: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
content: '';
opacity: 0;
background-color: #ffffff;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
figure.snip0013:hover img {
opacity: 0.35;
}
figure.snip0013:hover > div i {
opacity: 0.9;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
figure.snip0013:hover > div i.left-icon {
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
}
figure.snip0013:hover > div i.right-icon {
-webkit-transform: translate3d(25%, -50%, 0);
transform: translate3d(25%, -50%, 0);
}
figure.snip0013:hover > div::before {
background: rgba(255, 255, 255, 0);
left: 30px;
right: 30px;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment