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
This is a demo page. We use two divs and two background images for left and right. And we use background-position attribute of css especially to align the right background to right of page. Dont forget to tell browser how bg should repeatet. Even if the page is resized, we have the same effect on the display. Demo and More
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.