Top

Follow me and receive all the latest free scripts:

By Email:

Categories
Most Popular Posts

Create fast & easy image rollovers without preload

Create fast & easy image rollovers without preload

Published September 30, 2014 by , category CSS

cssimagesrollover

The best way to create fast image rollovers without preload

Introduction

Even if plethora of solutions to the preloading image problem in JavaScript is available, a pure CSS solution, without preload, is preferable.

One of the best approaches (and not the only one!) is to create one single graphic file containing both images: the "off" and the "on" images.

See It In Action

Here is a live demo, also check the category buttons on the left side.

The technique

As I said before, the idea is to create one image containing the "off" and the "on" images.

In the example above, I took a 200px width by 100px height image. So here is the image I have created, containing both states:

Two states together in one image

CSS code

.image_hover a {
	display: block;
	background: url("../images/image-hover-on-off.png") no-repeat;
	width: 200px;
	height: 100px
}
.image_hover a:hover {
	background-position: 0 -100px;
	width: 200px;
	height: 100px
}

Create a a-elements with display:block and the image size (200x100px).

For the a:hover, change the background-position, "0" for the left positioning and "-100" for the top positioning.

HTML code

<div class="image_hover"><a href=""></a></div>

Conclusion

That's all, easy and efficient! This is the technique I use for my websites. Please comment below if you have other solutions :). Happy coding.

About Simon Laroche
Simon Laroche on Google+
Simon Laroche on Twitter
Simon Laroche on Facebook
Simon Laroche on Pinterest
Simon Laroche on LinkedIn
: I am a Coder, Designer, Webmaster and Expert SEO Consulting, I'm also a wise traveller and an avid amateur photographer. I created the website TipoCode and many others such as Landolia: a World of Photos...

If you need help about this script, please leave a comment below. I reply as much as I can depending of my time, you may also get help from others.
I also offer a paid support, if you are in the need to adapt or create a script...

Leave a comment

Comments (0 comment)

No comments for the moment!