CSS Rollover Effect With Images

Demo

First of all let’s have a look at the final result.

HTML

Now let’s have a look at the code starting with the HTML markup.

<div class="wrap-img">
    <span class="bg-img" style="background: url('images/img1.jpg') no-repeat;"></span>
    <div class="text-over">
        Title image 1
    </div>
</div>

<div class="wrap-img">
    <span class="bg-img" style="background: url('images/img2.jpg') no-repeat;"></span>
    <div class="text-over">
        Title image 2
    </div>
</div>

<div class="wrap-img">
    <span class="bg-img" style="background: url('images/img3.jpg') no-repeat;"></span>
    <div class="text-over">
        Title image 3
    </div>
</div>

As you could see we are adding the image in the background using inline style as we want three different images in this example. But if you have only one image you can add the style directly to you external CSS file.

CSS

Let’s see how the CSS looks like.

.bg-img {
    /* The width and height has to match the dimensions of your images */
    width: 260px;
    height: 386px;
    position: absolute;
}

.text-over {
    width: 260px;/* Best if the width is the same as your images */
    height: 50px;
    line-height: 50px;
    color: white;
    text-align: center;
    vertical-align: middle;
    bottom: -386px;/* Best if the value is the same as your images height */
    position: relative;
    background-color: rgba(0, 0, 0, .5);
}

.bg-img, .text-over {
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
}

.wrap-img:hover .bg-img {/* Explanation further down */
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
}

.wrap-img:hover .text-over {
    /* This is your image height minus the height defined
    for the id #text-over which is 50 in my case */
    bottom:-336px;
}

.wrap-img {
    /* The width and height have to match the dimensions of your images */
    width: 260px;
    height: 386px;
    overflow: hidden;
    position: relative;
    float: left;
    margin: 10px 5px;
    cursor: pointer;
    -moz-box-shadow: 0px 0px 5px #888;
    -webkit-box-shadow: 0px 0px 5px #888;
    box-shadow: 0px 0px 5px #888;
}

Let’s explain this part of the CSS #wrap-img:hover #bg-img. What this does is when I hover the element with the id #wrap-img the style is applied to the element with the id #bg-img. This is very handy when you want to trigger an animation on an element by rolling over a different one.

Note

As we are using the float property we will probably need to clear it. Here is how I did it. Add the following element just at the end of your nice CSS rollover effect <div class="clear_float"></div>. Then you will need some extra CSS.

.clearfix:after {
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

Don’t forget to leave me your comments.