Ideas for Subtle Hover Effects

Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements.

From our sponsor: Ship fast and never break a thing with Shortcut (formerly

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"/>
			<h2>Nice <span>Lily</span></h2>
			<p>Lily likes to play with crayons and pencils</p>
			<a href="#">View more</a>

	<!-- ... -->

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!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 157

Comments are closed.
  1. Lovely effect ML, well done (again!).

    Can anyone explain why on Safari the images are not scaled? It appears they only show the top-left corner of the image, maybe 10% of the total image as it should be displayed, kind of like it’s zoomed in on this part of the image.

    Don’t get this effect on other browsers, or on mobile iOS…

    Any help appreciated!


    • Hi Greg,
      I am having the same issue with images being skewed in Safari. Any luck getting a solution?

    • Hi Lizie, no – no reply as yet. Also would be interested if anyone has found a way to get the hover-effect to link on ‘click’… saw one idea to wrap the with a link but that didn’t seem to work for me… 🙁

    • Hi Greg,
      It’s been a few month and I’m circling back around to this scaled images issue in Safari. Still no answers?

    • Hi Greg,

      So, I found a solution. It’s a change in the CSS. For .grid figure img — comment out any min-height and min-width that you may have there. This is working for me.

      .grid figure img {
      position: relative;
      display: block;
      /* min-height: 100%;
      max-width: 100%;*/
      opacity: 0.8;

  2. Hi can some one tell me in what versions of browsers this plugin works well
    in mobile – android, ios, windows
    in desktop – IE , Chrome , Safari , Firefox and Opera

  3. I’m not sure why you have the link inside the figure. You can’t click on them in IE9 or IE10 in my testing. I wrapped the figure tag with the link tag and you can now click on the effects in IE.

    • Hi Brian, I am looking at trying to get the images and captions to ‘link’ after the hover. I tried adding an <ahref tag either side of the tags but that didn’t seem to work for me… can you post your code in a reply please? Many thanks. Greg

  4. Aww it makes me so sad. It used to work I guess, but today when I installed it and tried adding the plugin it said:

    “Unpacking the package…

    Installing the plugin…

    The package could not be installed. No valid plugins were found.

    Plugin install failed.”

    In my wordpress.

  5. I am assuming we just add this to my child themes style.css sheet? or is there anything else I need to do?

  6. Is anyone gettting an issue were every once in a while the image doesnt show, just the overlay color?

  7. Hi,
    can anyone provide some details on installation ?

    Any help is highly appreciated

  8. Hi, do you know why i can’t get to work the sadie effect on my iphone, but i can in my android?

  9. Hi… I have implemented the “Julia” effect with success in to Weebly. One thing though – I can’t change the color of the text in the headlines as I want. I found out to do it by changing the color of my “Paragraph Titles” in the set-up of Weebly. But I dont want to change the color on all other Paragraph Titles. Is there any other way to change the color of the text?

    Thanks in advance!

    • Hey Silas, just wondering how you were able to implement it in Weebly? I’m having a bit of trouble doing so. Thanks!

  10. Hi. Is there someone who can give me some information how to implement this into a SharePoint list? If I could get this working I’ll do a Step-by-Step Guide how to implement it in SharePoint if somebody interessted. But first, how do I have to start?

  11. Hi Mary Lou,

    Have you tried using Sass (do SCSS format) or Less? It would make your CSS codes a lot easier to read and improve upon.

    Please feel free to contact me if you need help getting started on SCSS. I do recommend SCSS.


  12. hello!!
    thank you so much “Layla effect” it’ very cute!!

    But I have a problem right now… :S I want to apply “light box” to my gallery and I don’t know where look to start XD
    I’m a beginner forgive me 😛
    I would like to apply to each image a multi image gallery….Is it possible? 🙂

    thank you so much!

  13. I have been trying to make an updated site concept using the tutorial here. I wanted to add a picture that fills up the entire horizontal screen. However I cannot do so as it will automatically shrink the size to meet the scale. I have tried to look and find a way to undo this however I cannot find out how. could someone tell me or help?

  14. Hello
    I write you from Spain
    My English is not very good
    How I can use your ideas for Subtle Hover Effects on a template made with Joomla 3
    Thank you