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: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

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. Hi
    I love the layla effect. I am a complete newbie. Is there any way you can help me how can I add the Lyla effect to my pictures on my website? I have already downloaded the source, but dont really know what to do with it.

    Here is what I have done so far.
    1. Add new Row in my page
    2. Add Visual Editor to the row
    3. Add new image in the visual editor.

    After this i tried to add the Lyla Effect code (from set1 file in HoverEffectIdeas\css) to the CSS Styles next to my Visual Editor and saved it. Nothing happened.

    I definitely know i am doing it wrong. Would highly appreciate any help.


  2. Hi I am a newbie to webdesigning in wordpress. I sutumbled upon your Layla effect and fell in love with it.

    I have downloaded the source file, but dont know what to do with it. I know i have to copy paste it somewhere, but dont know where, is it in the theme’s CSS (under EDITOR)? or should it be on the page where i want the images with Layla effect?

    I tried to add a row to my page and then add new Visual Editor to it, then paste the Layla code in the CSS settings text box right next to it, not much of help. Please dont laugh if this was something really obvious 🙂

    Will be great full for any help on this one.

  3. Hi mary,
    i’m using the “layla” Hover effect
    everything was working great on every browser for a long time
    but today iv’e noticed that on chrome the grid is braking and the hover dosent work
    iv’e ask around, and no one could figure it out
    and then i remembered that i had this same problem a while ago when chrome was updated and someone wrote here a line of code to put in the “layla” css sheet that fix it (and it seems that now has stooped working)

    do you know of this problem? any suggestions?


  4. Great effects. They’re really impressive. I implemented them into a site I’m currently developing. Seemed to work fine across all browsers until I tested it on iPhones and iPads and the Click state for “OSCAR“, unfortunately didn’t seem to do anything. Is anyone else experiencing this issue on iPhones or iPads?

  5. Is it possible to do the same effect on a background image instead to do it directly on an image? Thanks to everybody who will answer!

  6. Hi Mary Lou

    First off, I absolutely LOVE this. Brilliant JOB!

    That said! I tried to use this on a website I’m busy with (based on the Skeleton Framework) and my images are square and the grid is not based on “Grid” but “one Column” “two columns” etc. I assumed everything would just work, but it the hover content does not scale to fit within my square image.

    Any advice?

    Thank you in advance!


  7. Hi Mary Lou,

    You effects and code is great! Thank you for the resource.

    I am creating an accessible website and need the effects to happen on focus. I have been able to to get it to work by adding css for focus states. The only issue I find is that I need to add an tabindex=”0″ to the figure caption for it to work. But then I cannot press enter to activate the ahref link.

    Is there anyway this can be modified to get keyboard focus and activated by pressing enter? Since all animations on done on the figure elements, is there anyway to set the focus state on the ahref instead of the figure?

    Here is the code for one box
    <figure class="effect-sarah" tabindex="0"> <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/thumbs/contact-thumb.jpg" alt="img20" /> <figcaption> <h2>Contact</h2> <p>Get in touch</p> <a href="<?php echo network_home_url( 'contact' ); ?>">View more</a> </figcaption> </figure>

    and the css I modified

    figure.effect-sarah { background: #0087bf; } figure.effect-sarah img { max-width: none; width: -webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } figure.effect-sarah:hover img, figure.effect-sarah:focus img { opacity: 0.4; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } figure.effect-sarah figcaption { text-align: left; } figure.effect-sarah h2 { position: relative; overflow: hidden; padding: 0.5em 0; font-weight: bold; } figure.effect-sarah h2::after { position: absolute; bottom: 0; left: 0; width: 14%; height: 3px; background: #3f474e; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-80%, 0, 0); transform: translate3d(-80%, 0, 0); } figure.effect-sarah:hover h2::after, figure.effect-sarah:focus h2::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } figure.effect-sarah p { padding: 0; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } figure.effect-sarah:hover p, figure.effect-sarah:focus p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

    Hope this makes sense.

    Thanks For your code!

  8. Hi Mary Lou, I love these hover effects and they work fantastic!
    However the site I added them to (using Ming and Julia) is an existing Joomla template / site (which conflicted a lot with the effects in the beginning, but I got them to work!).

    The effects work beautifully in literally every browser and on mobile devices as well – EXCEPT for IE 10 and IE 11 (go figure).
    I know you stated these only work on “modern browsers”, but I didn’t know if this was including IE.
    If not – is there a fix for this?

    In IE11 – a few of the boxes just don’t appear on the page at all, they’re completely blank (tho others appear fine).
    In IE10 – they appear perfectly until you hover over them – then it turns 100% gray instead of their ‘effect’.

    I can send the test site url if you’d like to review.

    Any help or advice would be greatly appreciated! 🙂

    Thank you for your time!

  9. Hi! I love all these! But i have no idea where to put the code. Is there an installation guide?


  10. How do you make the “View More” with the href not be displayed in lily effect? The effect is working but the view more pops up and can be seen.

  11. For some reason the View More text is coming up on my site. What controls that and why does not display that text in the demo?