3 cool CSS3 image hover effects

Default avatar.
February 17, 2015
3 cool CSS3 image hover effects.

On the modern web there are numerous techniques that can be used to create interesting interactions, but the simplest and most elegant is usually CSS, and specifically the additions that came with CSS3. Back in the old days, we had to rely on JavaScript for this kind of effect, but thanks to ever-increasing support for CSS3 across browsers, it’s now possible to set up effects like these without any scripting at all. There are sadly still browsers (IE9 and below) that don’t support CSS3, so you’ll either need a fallback for legacy browsers or to treat the effect as a progressive enhancement. Today, we’re going to look at how we can apply cool, but neat hover effects to show and hide images captions. If you’d prefer to follow along with the code, you can download the files here.

Demo 1

The first demo is our simplest: the image will fly to its right to reveal the caption. 

The markup

For our first demo’s HTML we will use an unordered list and then wrap the caption and the image inside it. Note that we will also add the class demo‑1 and effect inside the unordered list tag. The markup will look like this:

<ul class="demo-1 effect">
 <li>
 <h2>This is a cool title!</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
 </li>
 <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

The CSS

For our CSS we will set relative positioning for our demo‑1 class and then set up the width and height. We will also hide the overflowed elements. I’ve also put some basic styles for my h2 and p tags as well as my image tag. Now for our effect class we will set the positioning to absolute and giving it a margin of ‑15px to the top and bottom. We will use CSS3’s transition to create a smooth effect. Our CSS looks like this:

.demo-1 {
 position:relative;
 width:300px; 
 height:200px;
 overflow:hidden;
 float:left;
 margin-right:20px;
 background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
 color:#fff;
 padding:10px;
 left:-20px;
 top:20px;
 position:relative
}
.demo-1 p {
 font-family:'Lato';
 font-size:12px;
 line-height:18px;
 margin:0
}
.demo-1 h2 {
 font-family:'Lato';
 font-size:20px;
 line-height:24px;
 margin:0;
}
.effect img {
 position:absolute;
 margin:-15px 0;
 right:0;
 top:0;
 cursor:pointer;
 -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
 -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
 -o-transition:top .4s ease-in-out,right .4s ease-in-out;
 transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
 top:-230px;
 right:-330px;
 padding-bottom:200px;
 padding-left:300px
}

Demo 2

Our second demo will show the image sliding down. This means when you hover your mouse over the image the caption will be revealed above it. 

The markup

For our second demo’s html, we’ll use very similar markup to our first demo. But this time we will use demo‑2 as the class, and add the zero class:

<ul class="demo-2 effect">
 <li>
 <h2 class="zero">This is a cool title!</h2>
 <p class="zero">Lorem ipsum dolor sit amet.</p>
 </li>
 <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

The CSS

Our CSS will be almost the same as the first demo, except that this time we will move our image downwards by settings the property bottom to ‑96px. We’ll also use CSS3’s transition to create a smooth effect:

.demo-2 {
 position:relative;
 width:300px;
 height:200px;
 overflow:hidden;
 float:left;
 margin-right:20px;
 background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
 color:#fff;
 padding:10px;
 left:-20px;
 top:20px;
 position:relative
}
.demo-2 p {
 font-family:'Lato';
 font-size:12px;
 line-height:18px;
 margin:0
}
.demo-2 h2 {
 font-size:20px;
 line-height:24px;
 margin:0;
 font-family:'Lato'
}
.effect img {
 position:absolute;
 left:0;
 bottom:0;
 cursor:pointer;
 margin:-12px 0;
 -webkit-transition:bottom .3s ease-in-out;
 -moz-transition:bottom .3s ease-in-out;
 -o-transition:bottom .3s ease-in-out;
 transition:bottom .3s ease-in-out
}
.effect img.top:hover {
 bottom:-96px;
 padding-top:100px
}
h2.zero,p.zero {
 margin:0;
 padding:0
}

Demo 3

For our last demo, we’ll create a flipping card effect. This means when you hover your mouse on the image it will spin it around on its axis to reveal the description. 

The markup

For our last demo markup, we’ll use a different structure. First, we’ll use the HTML5 figure element along with a figure caption tag inside it. We’ll also use the demo‑3 class for our unordered list:

<ul class="demo-3">
 <li>
 <figure>
 <img src="images/image1.jpg" alt=""/>
 <figcaption>
 <h2>This is a cool title!</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
 </figcaption>
 </figure>
 </li>
</ul>

The CSS

In our CSS, we will set the figure image to a relative position and then hide the backface-visibility. We’ll also use the rotateY transform: ‑180 degrees for figcaption and then change it to 180 degrees for the hover of both the image and caption:

.demo-3 {
 position:relative;
 width:300px;
 height:200px;
 overflow:hidden;
 float:left;
 margin-right:20px
}
.demo-3 figure {
 margin:0;
 padding:0;
 position:relative;
 cursor:pointer;
 margin-left:-50px
}
.demo-3 figure img {
 display:block;
 position:relative;
 z-index:10;
 margin:-15px 0
}
.demo-3 figure figcaption {
 display:block;
 position:absolute;
 z-index:5;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box
}
.demo-3 figure h2 {
 font-family:'Lato';
 color:#fff;
 font-size:20px;
 text-align:left
}
.demo-3 figure p {
 display:block;
 font-family:'Lato';
 font-size:12px;
 line-height:18px;
 margin:0;
 color:#fff;
 text-align:left
}
.demo-3 figure figcaption {
 top:0;
 left:0;
 width:100%;
 height:100%;
 padding:29px 44px;
 background-color:rgba(26,76,110,0.5);
 text-align:center;
 backface-visibility:hidden;
 -webkit-transform:rotateY(-180deg);
 -moz-transform:rotateY(-180deg);
 transform:rotateY(-180deg);
 -webkit-transition:all .5s;
 -moz-transition:all .5s;
 transition:all .5s
}
.demo-3 figure img {
 backface-visibility:hidden;
 -webkit-transition:all .5s;
 -moz-transition:all .5s;
 transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
 -webkit-transform:rotateY(180deg);
 -moz-transform:rotateY(180deg);
 transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
 -webkit-transform:rotateY(0);
 -moz-transform:rotateY(0);
 transform:rotateY(0)
}

Samuel Norton

Sam Norton is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…