Expanding Background Images on Mouse Hover with CSS
You are here:Home » CSS » Expanding Background Images on Mouse Hover with CSS

Expanding Background Images on Mouse Hover with CSS


Hovering effects on background images give a good look over your image content on your website. It is easy to code images with hovering effects by using CSS. When an user hover the mouse over the image, the divs should not change their dimensions but images. This requires adding a simple CSS rule for background  image in the hover pseudo class. Let’s see clearly how an expanding feature for an image on hovering can be coded.

First let’s code the conventional HTML template of inserting an image we wanted to apply CSS for.

<!DOCTYPE html>
<html>
<head>
<title>Background image expansion on hover</title>
<!--- Include jquery and Google Map scripts. --->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div class="container">
        <div class="work" id="a">
        </div>

        <div class="work" id="b">
        </div>

        <div class="work" id="c">
        </div>

        <div class="work" id="d">
        </div>       
        <div class="work" id="e">
        </div>

        <div class="work" id="f">
        </div>

    </div>
</body>
</html>

In the above HTML code, the divs baring IDs a, b, c, d, e, f load the blocks of CSS code with images on to the webpage respectively. The ‘work’ class is the block of CSS code with hovering effect for images. So when a webpage is loaded, the both CSS blocks are loaded simultaneously.

The images can be inserted in div tags themselves but if any problem arises while loading CSS, they would look awkward on the half loaded webpage. So images are good to be loaded with the CSS only. If the CSS load, the images load else only text would appear on the webpage.

The CSS code for loading images on to the webpage is as follows:

#a {
    background-image: url(http://upload.wikimedia.org/wikipedia/en/0/0d/Simpsons_FamilyPicture.png);
}
#b {
    background-image: url(http://images.wikia.com/simpsons/images/archive/6/65/20100602024832!Bart_Simpson.png);
}
#c {
    background-image: url(http://upload.wikimedia.org/wikipedia/en/9/9d/Maggie_Simpson.png);
}
#d {
    background-image: url(http://upload.wikimedia.org/wikipedia/en/a/ab/FuturamaReincarnation.png);
}
#e {
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/7/7d/The_Brady_Bunch_%22The_Slumber_Party%22_1970.jpg);
}
#f {
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/4/44/Crowing_pains-PD_Looney_Tunes-_sylvester_%2B_foghorn.png);
}

We’re done with inserting images into respective divs. We need to apply the hovering code on to them. So, we would consider coding ‘work’ class now.

.work {
    width: 33.3333%;
    height: 200px;
    background-color: #ccc;
    float: left;
    -webkit-transition: 1.5s;
    overflow: hidden;
    background-size: 200px 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.work:hover {
    cursor: pointer;
      background-size: 300px 150%;
}

You can notice increasing the background size of 200px to 300px by 150%. This will evenly expand image without any zigzag stretching.

You may also apply styles for the the image container if wanted. The benefit of applying styles for the image container is that it loads the images in to specified dimensions. The code for ‘container’ class is as shown below:

.container {
    width: auto;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #aaa;
}

If you don’t want to apply styles for the container div(parent div), you may ignore the above part of CSS and remove “class=‘container’” from it. Then the HTML code would look like this:

<div>
        <div class="work" id="a">
        </div>
        <div class="work" id="b">
        </div>
        <div class="work" id="c">
        </div>
        <div class="work" id="d">
        </div>       
        <div class="work" id="e">
        </div>
        <div class="work" id="f">
        </div>
    </div>

Demo:




0 comments:

Post a Comment

We're happy to read your thoughts and we'd try our level best to clear your queries if asked. Let's discuss it in a better way. Please don't spam and spoil the conversation :) Thank you!!