- <!--Place the images within the text as you would normally and wrap them in an anchor tag, give the anchor a class so that we can add backgrounds in the CSS-->
- <p>
<a class="swap01" href="#">
<img src="assets/swap01a.jpg" width="100" height="150" alt="Blackpool Tower">
</a>
<strong>Blackpool Tower (hover to see a colour image)</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas hendrerit viverra. Nulla vel nibh mattis libero aliquam iaculis. Maecenas sollicitudin euismod accumsan. Suspendisse porta ultrices arcu. Nunc vel dui nec neque vulputate auctor.
</p> - <p>
<a class="swap02" href="#">
<img src="assets/swap02a.jpg" width="100" height="150" alt="Sunset at Blackpool">
</a>
<strong>Sunset at Blackpool (hover to see a colour image)</strong> - Quisque molestie tellus vitae magna sagittis a mattis leo venenatis. Ut velit mauris, mattis a tincidunt in, mattis ac tortor. Donec volutpat elit eget nisi scelerisque convallis. Phasellus tempor vehicula erat a consequat.
</p>
CSS3 Demos - Image Swap On Hover
Use CSS visibility property to swap one image for another when the original is hovered over. To do this we use CSS to add the swapped in image as a background and place the original image over the top of it. We then hide the original image when it's hovered over, leaving only the background visible.
What We're Aiming For
Hover over the images to see colour versions
Blackpool Tower (hover to see a colour image) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas hendrerit viverra. Nulla vel nibh mattis libero aliquam iaculis. Maecenas sollicitudin euismod accumsan. Suspendisse porta ultrices arcu. Nunc vel dui nec neque vulputate auctor. Sed tincidunt magna sit amet est viverra vehicula. Nullam velit mauris, vulputate eu congue quis, sollicitudin nec nisl. Aliquam lobortis odio ac purus consectetur id auctor elit cursus. Praesent mollis tempor cursus. Aliquam convallis venenatis aliquam. Quisque gravida accumsan neque, at mollis ipsum tincidunt non. Curabitur ut magna quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent commodo suscipit sapien eu semper. Nullam commodo tellus ut ante blandit eu laoreet ante mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam varius quam sem, vitae aliquet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Sunset at Blackpool (hover to see a colour image) - Quisque molestie tellus vitae magna sagittis a mattis leo venenatis. Ut velit mauris, mattis a tincidunt in, mattis ac tortor. Donec volutpat elit eget nisi scelerisque convallis. Phasellus tempor vehicula erat a consequat. Donec id nulla quis ligula consectetur tempus. Maecenas tortor odio, suscipit non venenatis tempus, consequat quis velit. Proin vel sagittis nisi. Aenean risus libero, laoreet vitae ultricies ut, auctor ut sem. Quisque placerat, nisi cursus adipiscing dictum, risus odio porttitor dui, ut sagittis sem tellus id ante. In eu lorem ante. Morbi vel purus ipsum, ut consectetur diam. Vivamus mollis lectus malesuada sem porta dictum. Praesent rutrum facilisis diam. Curabitur eget sollicitudin felis. Vivamus ut augue molestie odio vulputate ultricies in id tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam varius quam sem, vitae aliquet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Images from Stock.xchng
Step By Step
Step One
Add and style the images
HTML - this is the same for each step
CSS FOR THIS STEP
- /***First style the links containing the images***/
- a.swap01, a.swap02 {
- display:block; /*forces the link to cover to entire height and width of the image (specified on the next two lines)*/
- width: 100px; /*image width*/
- height: 150px; /*image height*/
- margin: 10px 25px 0 15px; /*space around the images, allow enough for the shadow*/
- /*add a small drop shadow to the images*/
- -webkit-box-shadow: 2px 3px 8px #7c7c7c;
- -moz-box-shadow: 2px 3px 8px #7c7c7c;
- box-shadow: 2px 3px 8px #7c7c7c;
- }
- /***Now position the links containing the images***/
- a.swap01{
- float:left; /*places the image on the left of the text and wraps the text around it*/
- }
- a.swap02{
- float:right; /*places the image on the right of the text and wraps the text around it*/
- }
- /***Next add a background to the links, this will covered by the images in the HTML above until step 2***/
- a.swap01{
- background-image:url("assets/swap01.jpg"); /*the image you want to swap in*/
- }
- a.swap02{
- background-image:url("assets/swap02.jpg"); /*the image you want to swap in*/
- }
Result
The images are styled, but when they're hovered over nothing happens
Blackpool Tower (hover to see a colour image) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas hendrerit viverra. Nulla vel nibh mattis libero aliquam iaculis. Maecenas sollicitudin euismod accumsan. Suspendisse porta ultrices arcu. Nunc vel dui nec neque vulputate auctor. Sed tincidunt magna sit amet est viverra vehicula. Nullam velit mauris, vulputate eu congue quis, sollicitudin nec nisl. Aliquam lobortis odio ac purus consectetur id auctor elit cursus. Praesent mollis tempor cursus. Aliquam convallis venenatis aliquam. Quisque gravida accumsan neque, at mollis ipsum tincidunt non. Curabitur ut magna quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent commodo suscipit sapien eu semper. Nullam commodo tellus ut ante blandit eu laoreet ante mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam varius quam sem, vitae aliquet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Sunset at Blackpool (hover to see a colour image) - Quisque molestie tellus vitae magna sagittis a mattis leo venenatis. Ut velit mauris, mattis a tincidunt in, mattis ac tortor. Donec volutpat elit eget nisi scelerisque convallis. Phasellus tempor vehicula erat a consequat. Donec id nulla quis ligula consectetur tempus. Maecenas tortor odio, suscipit non venenatis tempus, consequat quis velit. Proin vel sagittis nisi. Aenean risus libero, laoreet vitae ultricies ut, auctor ut sem. Quisque placerat, nisi cursus adipiscing dictum, risus odio porttitor dui, ut sagittis sem tellus id ante. In eu lorem ante. Morbi vel purus ipsum, ut consectetur diam. Vivamus mollis lectus malesuada sem porta dictum. Praesent rutrum facilisis diam. Curabitur eget sollicitudin felis. Vivamus ut augue molestie odio vulputate ultricies in id tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam varius quam sem, vitae aliquet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Step Two
Hide the images from the HTML (above) and reveal the background images in the CSS
CSS FOR THIS STEP
- /***All we're doing here is hiding the images placed in the HTML and revealing the background images specified in the CSS in step one***/
- a.swap01:hover img, a.swap02:hover img{
- visibility: hidden;
- }
Result
hover over the images
Blackpool Tower (hover to see a colour image) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas hendrerit viverra. Nulla vel nibh mattis libero aliquam iaculis. Maecenas sollicitudin euismod accumsan. Suspendisse porta ultrices arcu. Nunc vel dui nec neque vulputate auctor. Sed tincidunt magna sit amet est viverra vehicula. Nullam velit mauris, vulputate eu congue quis, sollicitudin nec nisl. Aliquam lobortis odio ac purus consectetur id auctor elit cursus. Praesent mollis tempor cursus. Aliquam convallis venenatis aliquam. Quisque gravida accumsan neque, at mollis ipsum tincidunt non. Curabitur ut magna quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent commodo suscipit sapien eu semper. Nullam commodo tellus ut ante blandit eu laoreet ante mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam varius quam sem, vitae aliquet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Sunset at Blackpool (hover to see a colour image) - Quisque molestie tellus vitae magna sagittis a mattis leo venenatis. Ut velit mauris, mattis a tincidunt in, mattis ac tortor. Donec volutpat elit eget nisi scelerisque convallis. Phasellus tempor vehicula erat a consequat. Donec id nulla quis ligula consectetur tempus. Maecenas tortor odio, suscipit non venenatis tempus, consequat quis velit. Proin vel sagittis nisi. Aenean risus libero, laoreet vitae ultricies ut, auctor ut sem. Quisque placerat, nisi cursus adipiscing dictum, risus odio porttitor dui, ut sagittis sem tellus id ante. In eu lorem ante. Morbi vel purus ipsum, ut consectetur diam. Vivamus mollis lectus malesuada sem porta dictum. Praesent rutrum facilisis diam. Curabitur eget sollicitudin felis. Vivamus ut augue molestie odio vulputate ultricies in id tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam varius quam sem, vitae aliquet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Full Code For You To Copy And Paste
HTML
- <p><a class="swap01" href="#"><img src="assets/swap01a.jpg" width="100" height="150" alt="Blackpool Tower"></a><strong>Blackpool Tower (hover to see a colour image)</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas hendrerit viverra. Nulla vel nibh mattis libero aliquam iaculis. Maecenas sollicitudin euismod accumsan. Suspendisse porta ultrices arcu. Nunc vel dui nec neque vulputate auctor. Sed tincidunt magna sit amet est viverra vehicula. Nullam velit mauris, vulputate eu congue quis, sollicitudin nec nisl. Aliquam lobortis odio ac purus consectetur id auctor elit cursus. Praesent mollis tempor cursus. Aliquam convallis venenatis aliquam. Quisque gravida accumsan neque, at mollis ipsum tincidunt non. Curabitur ut magna quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent commodo suscipit sapien eu semper. Nullam commodo tellus ut ante blandit eu laoreet ante mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam varius quam sem, vitae aliquet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
- <p><a class="swap02" href="#"><img src="assets/swap02a.jpg" width="100" height="150" alt="Sunset at Blackpool"></a><strong>Sunset at Blackpool (hover to see a colour image)</strong> - Quisque molestie tellus vitae magna sagittis a mattis leo venenatis. Ut velit mauris, mattis a tincidunt in, mattis ac tortor. Donec volutpat elit eget nisi scelerisque convallis. Phasellus tempor vehicula erat a consequat. Donec id nulla quis ligula consectetur tempus. Maecenas tortor odio, suscipit non venenatis tempus, consequat quis velit. Proin vel sagittis nisi. Aenean risus libero, laoreet vitae ultricies ut, auctor ut sem. Quisque placerat, nisi cursus adipiscing dictum, risus odio porttitor dui, ut sagittis sem tellus id ante. In eu lorem ante. Morbi vel purus ipsum, ut consectetur diam. Vivamus mollis lectus malesuada sem porta dictum. Praesent rutrum facilisis diam. Curabitur eget sollicitudin felis. Vivamus ut augue molestie odio vulputate ultricies in id tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam varius quam sem, vitae aliquet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
CSS
- a.swap01{
float:left; /*places the images in a line*/
} - a.swap02{
float:right;
} - a.swap01, a.swap02 {
display:block;
width: 100px;/*image width*/
height: 150px;/*image height*/
margin:10px 25px 0 15px;
padding:0;
-webkit-box-shadow: 2px 3px 8px #7c7c7c;
-moz-box-shadow: 2px 3px 8px #7c7c7c;
box-shadow: 2px 3px 8px #7c7c7c;
} - a.swap01{
background-image:url("assets/swap01.jpg");/*the image you want to swap in*/
} - a.swap02{
background-image:url("assets/swap02.jpg");/*the image you want to swap in*/
} - a.swap01:hover img, a.swap02:hover img{
visibility: hidden; /*hides the original images on hover*/
}