Image Rollover with CSS

If you’re a novice web designer or perhaps you haven’t had the time to brush up on CSS in the past few years and prefer of designing websites directly in a WYSIWYG editor such as Dreamweaver, then I’m sure you’re familiar with creating rollovers. I bet you’re also aware of the bulky javascript that ends up generating in your HTML file.

The image at left shows a completely javascript free rollover. It’s accomplished with just a few lines of code, 1 image containing both the normal and the hover state and a single pixel transparent GIF file which will act as place holder for the effect.

Interface Controlled by Weather & Time

I’ve designed Tisha Creative’s header by stacking 2 Images on top of one another. The top layer composed of a transparent PNG file sits on top of a bottom layer containing the backdrop image. The effect of resizing the browser window and seeing the skyline slide along the backdrop is achieved through Using 2 separate background styles for each of the DIV tags containing the images.

Tisha Creative

Employed by Tisha Creative for the past 2 years as a Senior Web Designer, I’m extremely fortunate to practice, learn, and deploy various Web-based projects that come through the door. The company’s website has become one of my most ambitious projects to date. Working along side my Creative Director, Kevin Cale, and Art Director, Kathleen Lota, I’m constantly developing new ideas and technologies in demonstrating our potential and expertise in web design and development by utilizing our site as a model for innovative and future-foreword ideas that we’re able to offer to our current and future clients.