blog tips: CSS Hover Effects

Code Rollovers with Floated Images:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document, CSS Rollovers</title>

<style>
/**this styles the paragraph**/
#rollover p {
float: left;
width: auto;
margin: 6px;
}

/**the linked thumbnail**/
#rollover a {
display: inline-block;
position: relative;
margin-right: 2%;
text-decoration: none;
}

/**the span with full size image**/
#rollover a span {
display: block;
background-color: #000;
color: #FF3;

font-weight: bold;
text-align: center;
position: absolute;
z-index: 100;
/**adjust where desired**/
left: 0px;
top: 0px;
/**same size as images**/
height: 125px;
width: 125px;
opacity: 0;
/**CSS Transitions**/
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}

/**spans are hidden until mouseover or focus**/
#rollover a:hover span,
#rollover a:active span,
#rollover a:focus span {opacity:1;}
#rollover a:hover,

#rollover a:focus {opacity:1}
#rollover a span:hover {opacity:1;}
#rollover:hover {opacity:1;}

/**float clearing**/
#rollover:after{

clear: both;

display: block;
content: '';
}
</style>

</head>
<body>
<div id="rollover">
<h3>Rollovers with Floated Images:</h3>

<p><a href="#"><img alt="description" src="http://placehold.it/125x125&text=thumbnail"><span> <img alt="description" src="http://placehold.it/125/000000/ffffff&text=full size image"></span></a></p>

<p><a href="#"><img alt="description" src="http://placehold.it/125x125&text=thumbnail"><span> <img alt="description" src="http://placehold.it/125/0000ff/ffffff&text=full size image"></span></a></p>

<p><a href="#"><img alt="description" src="http://placehold.it/125x125&text=thumbnail"><span> <img alt="description" src="http://placehold.it/125/ff3333/ffffff&text=full size image"></span></a></p>

<!--end #rollover--></div>
</body>
</html>