I decided to create my own version of the Google Maps icon using Photoshop, and now I want to replace the current image with my duplicate when the link that wraps around both is hovered over. To achieve this, I used the position: absolute property to layer both images on top of each other within a container. Despite adding overflow: hidden to the container's CSS, the positioning ended up being incorrect.
HTML MARKUP
<div class="links_ct">
<a class="link" href="#">
<img class="back" src="files/img/gmaps2.png"/>
<img class="front" src="files/img/gmaps.png"/>
</a>
</div>
CSS
.links_ct {
width: 45px;
height: 45px;
margin: 15px 10px 15px 0;
overflow: hidden;
}
.front, .back {
display: block;
width: 45px;
height: 45px;
position: absolute;
}
.back {
left: -45px;
float: left;
z-index: 500;
}
.front {
z-index: 200;
}
JQUERY
function head_link_hover() {
$('.link').hover(function () {
$('.back').animate({
left: '+=45px'
});
}, function () {
$('.back').animate({
left: '-=45px'
});
})
}
$(document).ready(function () {
head_link_hover();
});
Despite the animation working correctly, it seems to be appearing on the wrong side of the page.