Home › Blogs › n8coder's blog ›

Mouseover images with CSS

Submitted by n8coder on Sun, 05/03/2009 - 14:39

Sometimes we need mouseover effect for two images or more. For pure-css image galleries with thumbnail or comparison of before-later photos or photoshop effects like dark-light etc... Be sure that all images have same image width-height. We use an empty container with fixed width-height. We set the first image as background and the second one as hover-background. Demo

Example page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Mouseover Images with CSS</title>
	<style type="text/css">
		
	div.hover_images {
		float: left;
		height: 120px; 
		width: 90px;
		border: 1px solid #abc;
		background: url(image1.jpg) no-repeat; background-position: center;
	}
		
	div.hover_images:hover { 
		background: url(image2.jpg) no-repeat; 
		background-position: center;
	}
		
	</style>
	
</head>
<body>

<h1>Mouseover Images with CSS</h1>
<div class="hover_images"></div>
<p> This is an example, how to use two background-images to make javascript-like mouseover effect. We use two background-images; the second one appears just when mouse comes over div-area.
</p>
</body>
</html>
Bookmark/Search this post with
AttachmentSize
Download this example: mouseover_image_css.zip9.52 KB
Tags:

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Use <pre> all your html php come here </pre> for your code
  • Allowed HTML tags: <a> <b> <pre> <h1> <h2> <h3> <h4> <h5> <h6> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <div> <style><img> <br> <blockquote>
  • Lines and paragraphs break automatically.
  • You may insert videos with [video:URL]

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.

CafeWebmaster.com(CW) is a free online community for webdevelopers and beginners. Anybody can share their code, articles, tips, tutorials, code-examples or other webdesign related material on the site. Newbies can submit their questions and reply to existing questions. CW does not guarantee or warrant reliability of code, data and information published on the site. Use the site on your own risk. The site takes no responsibility of direct or indirect loss or any kind of harm to its users. The site also doesn't take responsibility of infected files or source code with any kind of infection or viruses, worms, spywares, malwares, trojan horses. CW reserves the right to edit, move, or delete any of content for any reason.