CSS image hover effects create using only CSS

Create custom CSS image hover effects using only CSS. Very easy to implement CSS code.

You can check the live demo or you can also download source file then you modify as you like and use on your website. you can check me another tutorial on how to create CSS lightbox with animation effects.

HTML

<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>

CSS

@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);
}

3 Comments

  1. […] You can study on w3schools about css text animation effect. then you can also implement best css hover effects. […]

Leave a Reply