60+ Amazing Image Hover Effect Using CSS3

In CSS Tutorial, Hover Effects Apr 11, 2017
Image Hover Effect CSS3

A vast collection of Image Hover Effect Using CSS3 doesn’t only give you more choice to choose the best effect for your web template but also make your website look differently.

This free group of 63 hovers effects or transitions to use in your next web project. All created using pure CSS and no JS. Coded by Mahesh.

This isn’t the first time we are going to share your image effects; we have already built some our self. You can take a look four of Cool Image Hover Effects which are build with only CSS.

Image Hover Effect HTML Markup

Our today collection is very broad range and quickly to implement hover effects. If you don’t know much about CSS, you can still apply these effect yourself into your upcoming project.

If you are an expert, then it’s still useful for you because it will save your a lot of time and give your site new stunning look. Let’s see the HTML markup.

The markup is simple and easy to understandable. All of the effects HTML code define inside two of divs. The first one is main div and second one is child div with class name effects.

Each of image effect place inside a div class name demo and then define a HTML5 figure element which hold the image. It also used figcaption HTML5 element which holds the text, heading, and a link. Here we have first two effect HTML code.

<div class="main"> <div class="effects" id="effects"> <div class="demo"> <figure class="imghvr-fade"><img src="https://placehold.it/360x270" alt="01"> <figcaption> <h3>Oscar Wilde</h3> <p>&quot;You can never be overdressed or overeducated.&quot;</p> </figcaption><a href="javascript:;"></a> </figure> </div> <div class="demo"> <figure class="imghvr-push-up"><img src="https://placehold.it/360x270" alt="02"> <figcaption> <h3>Oscar Wilde</h3> <p>&quot;You can never be overdressed or overeducated.&quot;</p> </figcaption><a href="javascript:;"></a> </figure> </div> </div> </div> 

Image Hover Effect CSS3 Styling

The CSS is the bit long because there are 60+ effects, so we are going to explain mention few of style here, but you can find all of the styles in download source file.

[class*=' imghvr-'], [class^=imghvr-] { font-family: Montserrat, sans-serif; position: relative; display: inline-block; margin: 0; max-width: 100%; background-color: rgba(230, 230, 230, .7); color: #666; overflow: hidden; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0) } [class*=' imghvr-'] img, [class^=imghvr-] img { vertical-align: top; max-width: 100% } 

Similar we have to style the figcaption and here it’s style.

[class*=' imghvr-'] figcaption, [class^=imghvr-] figcaption { background-color: rgba(255, 255, 255, .9); padding: 20px; position: absolute; top: 15px; bottom: 15px; left: 15px; right: 15px; border: 1px solid rgba(0, 0, 0, .1) } 

We have to do the same kind of things with another element such as p, h3, and link. For each effect, we have different styles for example here is a case of hover fade effect style.

.imghvr-fade figcaption, .imghvr-fade:hover img { opacity: 0 } .imghvr-fade:hover figcaption { opacity: 1 } 

Codepen Demo

See the Pen image hover 63 effects by Mahesh (@maheshambure21) on CodePen.

That’s It. Share with your friend and leave your feedback.

Leave a Reply

Your email address will not be published. Required fields are marked *