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