CSS Rollover

Rollover function using CSS+HTML

by Matt Hodgson

HTML

<!---Image 1--->
<div class='parent'>
<img class='image' src='https://learn.adafruit.com/system/assets/assets/000/012/878/thumb100/led_strips_doge.bmp?1386611464' />
<div class='text'>Example 1</div>
</div>
<!---Image 1 End--->
<!---Image 2--->
<div class='parent'>
<img class='image' src='https://learn.adafruit.com/system/assets/assets/000/012/878/thumb100/led_strips_doge.bmp?1386611464' />
<div class='text'>Example 2</div>
</div>
<!---Image 2 End--->

CSS

.parent {
    height: 100px;
    width: 100px;
}

.parent .image {
    background-color: #0f0;
    width: 100%;
    height: 100%;
}
.parent .text {
    background-color: #f00;
    width: 100%;
    height: 100%;
    display: none;
}

.parent:hover .image {
    display: none;
}
.parent:hover .text {
    display: block;
}