Learn how to create image hover effects using only custom CSS. Very short code under good CSS hover shines effects animation.

Every web designer can use these effects on your website design carrier and you can change easily this code and modify as you wish.

If want learns more about css hover effects then please check this link. My previous demo you can check, please how to create 3D Image Hover Effect using only pure CSS.

See the Pen CSS image hover by CSS Points (@csspoints) on CodePen.

HTML

<figure class="box"> <img src="https://source.unsplash.com/user/erondu/800x600" alt="csspoints" /> <figcaption> <h3>Web Developer</h3> <p>A Web developer is a kind of programmer who specializes in the development of website.</p> </figcaption> <a href="#"></a> </figure> <figure class="box"> <img src="https://source.unsplash.com/user/von_co/800x600" alt="csspoints" /> <figcaption> <h3>Seo Expert</h3> <p>Then you should learn everything there is to know about SEO and become an SEO Expert.</p> </figcaption> <a href="#"></a> </figure> <figure class="box"> <img src="https://source.unsplash.com/user/daladude/800x600" alt="csspoints" /> <figcaption> <h3>Web Designer</h3> <p>A Web designer is someone who prepares content for the Web.</p> </figcaption> <a href="#"></a> </figure>

CSS