Pure CSS transparent image rollover for layered themes

Each div or block element ‘background’ style provides a single layer for graphic design, accessible through the style sheets of the page and site.

<style type=”text/css”>
.topimage {

background: url(sky.jpg);





Links can also be treated as blocks and a background image can be used – I am just using a plain white button in this example. 960 is the width of the header. 120 width for the menu buttons provides exactly 8 menu buttons – It also lines up the content below for a 960 page layout.

a.menu {

background: url(white.jpg);
width: 100px;
height: 27px;
padding:2px 0px 0px 20px;
font-size: 20px


There is no need for javascript events on a hover because hover is already exposed.

a.menu:hover {

text-decoration: underline;
color: white;
background: url(t-gray.png);


t-gray.png or transparent gray is nothing but one color png file which is nearly transparent and a little darker to increase the contrast level so the text does not bleed into – say in this example a cloud. Nothing prevents a more artistic button.

I digress, To add animations like http://www.mint.com/ we are talking about adding a jQuery event.

Now that the hard part is taken care of the html here is simple.

<div class=”topimage”>

<a href=”#”  class=”menu”>Home</a>
<a href=”#”  class=”menu” >Products</a>
<a href=”#”  class=”menu”>Support</a>
<span class=”menu”></span>

<span class=”menu”></span>
<span class=”menu”></span>
<span class=”menu”></span>
<span class=”menu”></span>


Most people who know how to blog already know how to create links. In a drupal environment the CSS and div would normally be part of the theme. So the person who wanted to change the header menu only needs to know that it is made with 8 class=”menu” elements – and this needs to be included on the cheat sheet for updating the site.


To wrap this for a drupal theme that allows somebody to change the header background without using CSS files or ftp.

<div class=”topimage”>

<!– block goes here for top image as a <img src=”companyheader.jpg”> no coding required for an affiliate or office admin to customize the image –>

<div style=”position:absolute; top:0px; left:0px”>

<a href=”#” class=”menu”>Home</a>
<a href=”#” class=”menu” >Products</a>
<a href=”#” class=”menu”>Support</a>
<span class=”menu”></span>

<span class=”menu”></span>
<span class=”menu”></span>
<span class=”menu”></span>
<span class=”menu”></span>




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: