Sunday, 15 September 2013

Trigger image transition by hovering over a text link

Trigger image transition by hovering over a text link

OK, I'm a complete rookie and have gleemed the coding I have so far from
various resources online and adapted it to suit my needs, so be gentle :P
Basically, I have a nice CSS transition happening when hovering over an
image. However, I want to put a text link beneath said image, that will
trigger the same image transition when you hover over the text link. Is
this possible? I've been searching for a result for some time now and
still not cracked this one!
CSS
a.home:link {color:#040404; text-decoration:none; font-weight:bold;
font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
a.home:visited {color:#040404; text-decoration:none; font-weight:bold;
font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
a.home:hover {color:#E5712C; text-decoration:none; font-weight:bold;
font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
a.home:active {color:#5F5F5F; text-decoration:none; font-weight:bold;
font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
#crossfade
{
position: relative;
width: 200px;
height: 200px;
border: solid 2px #5f5f5f;
border-radius: 8px;
box-shadow: 0px 10px 5px #888888;
}
#crossfade img
{
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
#crossfade img.top:hover {
opacity:0;
}
HTML
<div id="crossfade">
<img class="bottom"
src="http://www.officialdrivingtheory.co.uk/wp-content/uploads/TheoryTest-question.jpg"><a
href="http://www.livingthai.org/wp-content/uploads/2011/10/How-to-test-your-Thai-Language-ability.jpg"</a>
<img class="top"
src="http://www.dandybooksellers.com/acatalog/PracticalTest.jpg"/><a
href="http://www.livingthai.org/wp-content/uploads/2011/10/How-to-test-your-Thai-Language-ability.jpg"</a>
</div></br>
<a class ="home"
href="http://www.livingthai.org/wp-content/uploads/2011/10/How-to-test-your-Thai-Language-ability.jpg">TESTING</a>
You can see what I'm trying to do here: http://jsfiddle.net/WxVE4/1/
I've just used placeholder images and links for now as my site isn't
published yet.
Oh, and if anyone can tell me how to align the text link nice and
centrally beneath the image then that's extra brownie points :D

No comments:

Post a Comment