Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
12th September 2013

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

Apply hover effects and images to images and divs

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>

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Mitchell Finlay

      Do you have a better demonstration of this used in the wild? Does anyone else know?

    • isabellasophia

      great tutorial, thanks http://ebrandingexperts.com

    • http://www.morganfeeney.com/ Morgan Feeney

      Hi Mitchell, here’s one I made earlier there’s no JS though, only CSS3. Take a look: http://codepen.io/mofeenster/pen/qtkKy