Popout Details on Hover with CSS
Astra WordPress Theme

Popout Details on Hover with CSS

I recently saw a hover over trick that caught my eye and I thought it was a pretty clever way of showing more details on an element. I decided to give it a try and the solution was quite simple. Here I am gonna show How to show Popout Details on Hover with CSS.


The columns are made up of unordered list items, within each list item is the thumbnail image and the details of the item wrapped in a class of "info".

<ul class="columns">
    	<a href="#"><img src="thumbnail.jpg" alt="" /></a>
        <div class="info">
            <p>Short Description</p>

Popout Details on Hover w/ CSS


Start by styling the list items. Notice we add position: relative; to the list item, and on hover we raise the z-index to 99 so it lifts over the other elements.

<span style="color: #777;">/*--Column Styles--*/</span>
ul.columns {
	width: 960px;
	list-style: none;
	margin: 0 auto; padding: 0;
ul.columns li {
	width: 220px;
	float: left; display: inline;
	margin: 10px; padding: 0;
	position: relative;
ul.columns li:hover {z-index: 99;}

We add a position: relative; to the image as well, so we can control the z-index value on hover.

What we want to do here is to lower the opacity of the image by default to 30% then on hover, turn up the opacity to 100% and lift the image by increasing the z-index value to 999. This will allow the thumbnail to sit on top of the .info elements.

<span style="color: #777;">/*--Thumbnail Styles--*/</span>
ul.columns li img {
	position: relative;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; <span style="color: #777;">/*--IE8 Specific--*/</span>
ul.columns li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

Use absolute positioning to shift the .info class -10px to the left and -10px to the top. Since .info is using an absolute positioning, we must have enough top padding so the content within does not overlap the thumbnail.

To do this, the top padding is measured by adding 10px to the height of the thumbnail (200px in my demo). Some CSS3 was added for the rounded corners. We will hide .info by default, and show it on hover.

Popout Details on Hover w/ CSS

<span style="color: #777;">/*--Details Style--*/</span>
ul.columns li .info {
	position: absolute;
	left: -10px; top: -10px;
	padding: 210px 10px 20px;
	width: 220px;
	display: none;
	background: #fff;
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
	font-size: 1.2em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px 0;
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

Final Thoughts

Go ahead and experiment with this technique! If you have any questions or concerns please don’t hesitate to let me know. For those concerned with this technique working on IE6, you can use some jQuery tricks to get around the hover issue.

Popout Details on Hover w/ CSS


Don’t forget to Subscribe to Email Newsletter, Follow us on Twitter and Like us on Facebook – for recent updates.

Written by
AsHok Jain
Join the discussion

Let’s get social

Web design blog for professionals with topics focusing on useful design techniques, design best practices and design inspiration. Subscribe for updates!



Following our blog is a great way to make sure that you are up to date on the latest and greatest Freebies and WordPress news.