<figure class="snip1557">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample96.jpg" alt="sample96" /><i class="ion-android-arrow-forward"></i>
<h3>Malcolm Function</h3>
<a href="#"></a>
</figure>
<figure class="snip1557 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample100.jpg" alt="sample100" /><i class="ion-android-arrow-forward"></i>
<h3>Richard Tea</h3>
<a href="#"></a>
</figure>
<figure class="snip1557"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample101.jpg" alt="sample101" /><i class="ion-android-arrow-forward"></i>
<h3>Ingredia Nutrisha</h3>
<a href="#"></a>
</figure>
@import url(https://fonts.googleapis.com/css?family=Poppins:300);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1557 {
font-family: 'Poppins', Arial, sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
margin: 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #000000;
font-size: 16px;
line-height: 1.2em;
text-align: center;
font-weight: 300;
}
.snip1557 *,
.snip1557 *:before,
.snip1557 *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.65s ease;
transition: all 0.65s ease;
}
.snip1557:after {
-webkit-transition: all 0.65s ease;
transition: all 0.65s ease;
position: absolute;
height: 0px;
width: 0px;
top: -478px;
left: -478px;
border-radius: 50%;
border: 500px solid transparent;
border-top-color: #000000;
border-left-color: #000000;
content: '';
opacity: 0.8;
}
.snip1557 img {
max-width: 100%;
vertical-align: top;
}
.snip1557 i {
position: absolute;
top: -10px;
left: -10px;
border-radius: 50%;
color: #000000;
display: block;
z-index: 10;
}
.snip1557 i:before,
.snip1557 i:after {
border-radius: 50%;
}
.snip1557 i:before {
color: #ddd;
background-color: #fff;
font-size: 37.64705882px;
line-height: 64px;
text-align: center;
width: 64px;
}
.snip1557 i:after {
position: absolute;
top: -14px;
bottom: -14px;
left: -14px;
right: -14px;
border: 15px solid #ddd;
border-top-color: #2980b9;
border-left-color: #2980b9;
content: '';
z-index: -2;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.5);
}
.snip1557 i:hover {
background-color: #D2B17F;
cursor: pointer;
}
.snip1557 h3 {
bottom: 0;
color: #fff;
letter-spacing: 2px;
margin: 0;
opacity: 0;
padding: 10px 15px;
position: absolute;
right: 0;
text-transform: uppercase;
z-index: 3;
}
.snip1557 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9;
}
.snip1557:hover:after,
.snip1557.hover:after {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.snip1557:hover img,
.snip1557.hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.snip1557:hover i:before,
.snip1557.hover i:before {
color: #2980b9;
}
.snip1557:hover i:after,
.snip1557.hover i:after {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.snip1557:hover h3,
.snip1557.hover h3 {
opacity: 1;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
/* Demo purposes only */
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
Also see: Tab Triggers