Currently working on a website related to property planning for a customer. They have requested that when their customers hover over text, the central image should change. Is there a CSS-only method to achieve this?
<div>
<img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter">
<table class="plantable">
<tbody>
<tr>
<td style="color:#469785;"><a href="">Type <b>E</b></a></td>
<td style="color:#9BB8A0;"><a href="">Type <b>F</b></a></td>
<td style="color:#9DB77F;"><a href="">Type <b>G</b></a></td>
<td style="color:#9FA278;"><a href="">Type <b>G1</b></a></td>
<td style="color:#C9AE77;"><a href="">Type <b>H</b></a></td>
</tr>
</tbody>
</table>
</div>
The requirement is that when hovering over Type E, the central image changes to Image E, and when hovering over Type G, it changes to Image G. How can this be achieved?
I came across a solution that may work:
http://fiddle.jshell.net/tbz9nL4g/
<style>
.hover_image {position:relative;}
.hover_image .img1{position:absolute; display:none; z-index:99;}
.hover_image:hover .img1{display:block;}
.hover_image .img2{position:absolute; display:block; z-index:99;}
.hover_image:hover .img2{display:none;}
</style>
<div>
<a href="#" class="hover_image"> link text
<span class="img1"><img src="http://www.imagingshop.com/images/sharptone/hdr-2.jpg" /></span>
<span class="img2"><img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</span>
</a>
</div>
However, there are issues with this code, as it does not work when adding additional text. More details can be found here.