News

How to create a changeover image effect on hover

Discover how to add a hover effect that swapping images to mattch the current title text

Unclouded 2

How to create a changeover image effect on hover

There are some web effects that refuse to pass into history, even as an ever-increasing reliance on mobile browsing and use of apps over websites, renders those effects close to obsolete. Hover effects are chief among these; they can add a touch of sparkle to a site, throwing in a little ‘wow’ factor without compromising on usability.

So how about creating a hover effect that is not only an attractive feature but also serves as an integral part of the website’s functionality? By separating the hover element and the hover effect we can allow ourselves many more options for broadening and modernising the use of hover.

HTML structure

Two main <div>s are used. ‘Content-left’ will contain images while the ‘content-right’ side will house hover elements. Note that ‘content-left’ remains empty for now. We’ll be using JavaScript to place the content in here. Place as many links inside the ‘list-group’ <div> as you need, each containing the relevant picture link and data. You need only place the image names in the ‘data-hover-image’ declaration to identify which image will represent this element’s selection.

001    <div class=”content-left image”>
</div>
002    <div class=”content-right”>
003                <h1>Alternative Florida</h1>
004        <h2>Never Mind the Theme Parks
</h2>  
005    <div class=”list-group”>
006            <a href=”#” class=”list-group-
item” data-hover-image=”bg2.jpg”>
007                <div class=”titles”>
008                <h3 class=”title-link”>Blue 
Spring State Park</h4>
009                <h4 class=”title-link”>Visit 
the Manatees</h2>
010                </div>
011            </a>        
012            </div>
013    </div>

First CSS

We lay the groundwork for the hover effects by setting a background image for the left-hand side. Use the additional ‘image’ class to do this, then prepare the way for our background images to the ‘content-left’ <div>, which will override the previous background with size, repeat and positioning declarations. We can also set the widths of our left and right side <div>s as well as  background colours and a margin for our right side.

001    .image {
002        background-image: url(../images/
bg1.jpg);
003    }
004    .content-left {
005        position: fixed;
006        width: 65%;
007        background-size: cover;
008        background-repeat: no-repeat;
009        background-position: center 
center;
010        height: 100%;
011        overflow: hidden;
012    }
013    .content-right {
014        float: left;
015        margin-left: 65%;
016        width: 35%;
017        background: #182f44;
018    }

The JavaScript

Placing the following JavaScript snippet (see disc) at the bottom of the page will fire up the image-swapping hover effect. The script places a ‘hover-background’ <div> inside ‘content-left’ for each ‘list-group’ element included. It then assigns each relevant background image from the ‘data-hover-image’ declaration, an active or inactive state when hovered on or off. The full URL for each background image is also handled here, allowing simpler inclusion in the HTML for just an image name.

Final CSS

The final CSS styles for making the hover effects work at a basic level are concerned with giving the ‘hover-background’ some direction. We’ll apply the same background image styles that we gave the default image. We also give ‘hover-background’ a default opacity of 0, so that each image is invisible until required. When the hover element is used and the background is assigned the ‘active’ class, our CSS adjusts the opacity to 1.

001    .content-left .hover-background {
002        background-size: cover;
003        background-position: center;
004        width: 100%;
005        height: 100%;
006        opacity: 0;
007        position: absolute;
008    }
009    .content-left .hover-background.
active {
010        opacity:1;
011    }

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×