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