News

Apply hover effects and images to images and divs

Discover how to add interest and focus to images and complete page elements with jQuery-powered hover effects

Automatically Turn on Bluetooth

inspiration: freytaganderson.com

Some of the most difficult areas on a website to keep interesting are the menu and navigation elements. With everything else to consider, it’s so easy to fall into the trap of leaving them under developed. You want these elements to remain functional and, more importantly, useable for those viewing the site.

However, it’s also important  that you develop your site to stand out from the crowd. It can be a tricky tightrope, but there’s nothing like some simple hover effects to make an impact. Using an overlay effect on something more than just a word – for example, on an image – can give you a navigational element that delivers more than just a doorway to further content.

The HTML

For the purposes of this tutorial, we are going to create a home page for a travelogue, containing six image elements, placed in two rows of three. Each element will serve as a link and have a jquery hover effect which calls a colour overlay with content. The first step is to build the page and set the elements.

The CSS

This is a basic fixed-width site with a picture wall of images relating to the countries they link to. Margins aren’t necessary as we want the images touching. The H1 and H2 tags can use a font of your choice.

001 #container {
 002    width:1350px;
 003    margin:0 auto;
 004 }
 005 #logo {
 006    float:left;
 007    width:100%;
 008    text-align:center;
 009 }
 010
 011 .column {
 012    float:left;
 013    width:450px;
 014 }
 015 h1 {
 016    font-family: ‘Playball’, cursive;
 017    font-size:75px;
 018    color:#db3541;
 019 }
 020 h2 {
 021    font-family: ‘Special Elite’,     cursive;
 022    font-size:24px;
 023 }

The JQuery Plugin

Go to bit.ly/uLcJ7s to get your hands on a nifty plug-in for implementing overlay hover effects. Place the JavaScript file in a js folder and call it from index.html, then add IDs to the images. By assigning different IDs we can vary the colour of each overlay. The image height and width must also be declared.

001 <div class=”column”>
 002 <img id=”n1” src=”images/1.jpg”         width=”450” height=”283” />    
 003 </div>
 004
 005 <div class=”column”>
 006 <img id=”n2” src=”images/2.jpg”         width=”450” height=”283” />
 007 </div>

Add links and overlays

The links can be added to each element, with each href tag enclosing the div and content you want to display in the hover effect overlay. This content must be contained in a div with the class ‘.contenthover’ for the plug-in to call it. Style the content however you wish, using ul, H1 or whatever HTML elements you require.

001 <div class=”column”>
 002 <a href=”usa.html”>
 003 <img id=”n1” src=”images/1.jpg”         width=”450” height=”283”/>
 004 <div class=”contenthover”>
 005 <h3>USA</h3>
 006 <p>Pellentesque habitant morbi          tristique senectus et netus.  </p>
 007 </div>
 008 </a>        
 009 </div>

Fire it up

Add the script to get your overlays working. This plug-in offers multiple options, but to emulate the effect used by Freytag Anderson, we’re going for a coloured overlay with an opacity setting and a slow fade speed. Create a function call for each image ID, as below.

001 <script>
 002 $(function(){
 003 $(‘#n1’).contenthover({
 004 overlay_background:’#db3541’,
 overlay_opacity:0.8,
 fade_speed: 700
 005 });
 006 });
 007 </script>
×