It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’s all about being subtle with that little delightful surprise.
The techniques we are using for these hover effects involve 3D transforms and some pseudo-element transitions. Note that these will only work in modern browsers.
Sadly, transitions on text in Firefox are not very smooth which influences most of the effects.
The beautiful photography is from Unsplash, a site that brings you 10 free hi-resolution photos every 10 days. The icons used in one of the hover styles is from the Feather icon set by Cole Bemis.
This article was updated on 28 of October 2014 and we’ve added a second set of effects.
For the structure we are simply using a grid with figures:
<div class="grid"> <figure class="effect-lily"> <img src="img/1.jpg" alt="img01"/> <figcaption> <h2>Nice <span>Lily</span></h2> <p>Lily likes to play with crayons and pencils</p> <a href="#">View more</a> </figcaption> </figure> <!-- ... --> </div>
With some general styles defined for the grid and its items, we then specify the individual effects.
The following effect, called “Sadie”, will have a pseudo-element with a linear gradient slide in from the bottom and reveal some more text.
The title will change color:
figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
transform: translate3d(0,50%,0);
}
figure.effect-sadie h2 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #484c61;
transition: transform 0.35s, color 0.35s;
transform: translate3d(0,-50%,0);
}
figure.effect-sadie figcaption::before,
figure.effect-sadie p {
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie p {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
opacity: 0;
transform: translate3d(0,10px,0);
}
figure.effect-sadie:hover h2 {
color: #fff;
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
opacity: 1;
transform: translate3d(0,0,0);
}
We’ve omitted the prefixed properties for the sake of brevity; you will find them in the style sheet.
There are a lot of possibilities and these effects are just a small collection for your inspiration. We hope you enjoy it!
Awesome, Congrat for what you have archived (y)
Holy cow!
its so awesome
love you! 😀
Julia, Apollo and Jazz are my favorite 😀
I loved the Winston hover effect. But seems like it’s limited to fixed sized images. Any idea to make it work with images of varying height.
I’m Stuck here.
figure.effect-winston figcaption:before {
position: absolute;
top: 0;
left: 0;
}
Perfect! Thanks
Very nice! Keep up this beautiful work!
have you try to use on tablet ?
With my iPad chrome crashed if i click on the picture
Wau, this is just great work!
Fantastic!
I really love those inspiring transition but I’m wondering how to switch or swap the content instead of just making one appear. When hover, hide content one and show content 2, but with the same background image. If anyone can help, that would be amazing!
Thank you.
Wow your work is so inspirational!!! I’m so impressed by your design and front end skills, all of your work is so beautiful. I particularly enjoy the subtlety of the hover animations with delays of 0.05, 0.15 etc.. your attention to details is just amazing.
Impressive hovers. Thanks for this great work.
IE 10 dont like the anker in the figcaption 🙁
I put it direct in figure an Change css:
figure figcaption,
figure figcaption > a { ... }
to
figure figcaption,
figure a { ... }
also
figure figcaption > a {}tofigure a {...}Hi,
I’ve found an issue. The mouse over effects cause problem on other elements (other box).
For example try to remove an H2 from the demo page and see. (the issue is on chrome)
nice work ~ so beautiful effect~ great job~
Are these accessible with Screen readers?
I have to say WOW! Congrat!!
It is greate,
Lovely stuff but surely it would be better if this worked for mobile since that is where we’re heading
Hi
The noisy terry hover effect works fine on desktop but does not work on the mobile.
Could you please let me know if it’s going to be fixed?
Anugeeta
The noisy terry example does not work on moblie. Is there a fix for it?
Is it possible to use this in our template for product images (woocommerce)
As always great article Mary. I am really amazed! Keep up the good job 🙂