By
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 }
