<figure class="hover-box">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample14.jpg" alt="sq-sample14">
	<figcaption><i class="ion-android-add"></i></figcaption>
	<a href="#"></a>
</figure>
<figure class="hover-box">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample17.jpg" alt="sq-sample17">
	<figcaption><i class="ion-android-open"></i></figcaption>
	<a href="#"></a>
</figure>
<figure class="hover-box">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample19.jpg" alt="sq-sample19">
	<figcaption><i class="ion-android-star-outline"></i></figcaption>
	<a href="#"></a>
</figure>
<figure class="hover-box">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample20.jpg" alt="sq-sample20">
	<figcaption><i class="ion-android-stopwatch"></i></figcaption>
	<a href="#"></a>
</figure>
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.hover-box {
	position: relative;
	display: inline-block;
	margin: 20px;
	max-width: 190px;
	width: 100%;
	color: #bbb;
	font-size: 16px;
	box-shadow: none !important;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
.hover-box *, .hover-box:before, .hover-box:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.hover-box:before, .hover-box:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 50%;
	content: '';
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
	border: 2px solid #bbb;
	border-color: transparent #bbb;
}
.hover-box img {
	max-width: 100%;
	backface-visibility: hidden;
	vertical-align: top;
	border-radius: 50%;
	padding: 10px;
}
.hover-box figcaption {
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 5px;
	right: 5px;
	opacity: 0;
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 50%;
}
.hover-box i {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 4em;
	z-index: 1;
}
.hover-box a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
.hover-box:hover figcaption{
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.hover-box:hover:before, .hover-box:hover:after {
	border-width: 10px;
}
.hover-box:hover:before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.hover-box:hover:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

External CSS

  1. https://www.littlesnippets.net/css/codepen-result.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js