Ideas for Subtle Hover Effects

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

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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.

Sadie_Effect

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:

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.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 157

Comments are closed.
  1. These are awesome! Thank you so much.

    I have one question though: How can I switch out the icons in the Zoe effect? I want to place social media icons instead of Feather images. Is there a way to do this? I notice it incorporates :before but how would I go about making it an a element instead?

    Thanks!

  2. Thank you so much for these!
    I used the zoe effect for a shop on The Christian Girl.
    Everything worked perfectly up until about 2 weeks ago. On Chrome( Version 37.0.2062.120) on Mavericks, the text in the center disappears. This even happens for me on the demo. When I hover over the center, the text slides up and then the part that says, “Zoe never had the…” disappears. It will reappear if I scroll. From messing with my site, it goes away if I get rid of overflow:hidden, but then you can see the background block. This only happens in chrome. Any ideas on what is causing it or how to go about fixing it?
    Thanks!

    • Hi Cale,
      the latest Chrome release has several issues on Mac ๐Ÿ™ I don’t know what’s causing the p in this demo to disappear but adding -webkit-backface-visibility: hidden to figure.effect-zoe p will solve it. Hope it helps and thanks for your feedback, cheers, ML.

  3. Hello, great work! its possible using for commercial usage? – or only for free projects?

    Thanks keep up good work!

  4. Hey Mary. Always love checking in on codrops to see what new demos you have created! Amazing stuff!
    I was wondering if there’s an easy way to have another image fade in on hover state as an addition to the text/frame transitions?

  5. This is incredible. I have so many ideas that I want to implement these effects into. You rock! Thanks a ton!!!

    • It turns out max-width:100%; was causing this problem. Is there a work around for this? Other than not applying max width to the images.

  6. Hello Mary Lou,
    Great job, thanks !
    I have a question, is there a way for keeping the ratio of the pictures when the browser is resized ?

  7. Images do not display big enough when using max-width:100% and you see the background colour. Is there any workaround to be able to use max-width:100%?

  8. Found this at just the right time. Perfect for my next project, thanks a lot for sharing it.

  9. Mary Lou

    You’ve got some great hover effects here.

    I love those where the image zooms in/out such as Silly Chico and the line animations of Wild Romeo and Crazy Layla.

    Do these effects work on all browsers? Including the infamous IE? Plus are these effects ‘sticky’ for mobile browsers?

    Cheers

    Lee

  10. If you use this, you will want to test it in Firefox, as well as the webkit browsers. Text often runs off of right side of picture in demo in Firefox. Looks okay in Chrome. Don’t have windows system to check i.e., but then I don’t care about i.e.

    I love the variety of effects, nice work.