I'm trying to create a cool effect where the train ticket rotates when I hover over a leaf.
Although I can get the train ticket to rotate when I hover over it directly, it doesn't seem to work when I hover over the leaf. Can someone help me spot what's wrong with my code?
This is what I have in my CSS file:
#leaf{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#leaf:hover ~ #trainticket {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
rotate(90deg) scale(1.5) skew(45deg) translate(0px);
-webkit-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
-moz-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
-o-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
-ms-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
}
#trainticket{
display:block;
position: fixed;
left:0px;
bottom:0px;
width: 350px;
height: 175px;
background-size: contain;
background-repeat: no-repeat;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#trainticket:hover{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
rotate(90deg) scale(1.5) skew(45deg) translate(0px);
-webkit-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
-moz-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
-o-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
-ms-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
}
And this is the relevant part of my HTML file:
<div>
<a target="bio" href="bio1.html">
<img ID="leaf" src="leaftrans1.png"
style="position:absolute;
display:block;
top: 30px;
left: 30px;
width:10%;
height:10%;"></a>
<div>
<img ID="trainticket" src="current-train-ticket.jpg">
</div>
</div>