Is there a way to divide an image into different parts to create hover effects? For example, hovering over the top part of the image triggers one change, and hovering over the bottom part triggers another change. This example demonstrates this concept using two divs on top of the image. Are there alternative methods to achieve the same result?
Here is the code:
HTML
<div id="top_part">
<div id="up">UP</div>
</div>
<div id="bottom_part">
<div id="bottom">BOTTOM</div>
</div>
<a href="second"><img src="http://placekitten.com/300/300" class="back"></a>
CSS
.container img {
position:absolute;
width:300px;
height:300px;
}
#top_part{
position:absolute;
width:300px;
height:150px;
background-color:transparent;
}
#bottom_part{
position:absolute;
width:300px;
height:150px;
margin-top:150px;
background-color:transparent;
}
#up{
width:300px;
background-color:black;
opacity:.9;
color:white;
text-align:center;
visibility:hidden;
}
#bottom{
width:300px;
background-color:black;
opacity:.9;
color:white;
text-align:center;
margin-top:132px;
visibility:hidden;
}
#bottom_part:hover #bottom{
visibility:visible;
}
#top_part:hover #up{
visibility:visible;
}