Popout Details on Hover w/ CSS

Popout Details on Hover w/ CSS

Tags: Intermediate

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.

HTML

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".

Code:

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

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.

Code:

<pre><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;}</pre>

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.

Code:

<pre><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)";
}</pre>

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.

Code:

<pre><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;}</pre>

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.