Enlarge Photo on Mouseover (Two photo’s, repeat code)
<title></title>
<style type="text/css">ul {
padding: 0;
margin: 50px 500px;
list-style: none;
}
ul li { margin: 5px;
display: inline-block;
}
ul li a { padding: 5px;
display: inline-block;
border: 1px solid #f2f2f2;
}
ul li a img {
width: 125px;
height: 125px;
display: block;
}
ul li a:hover img {
transform: scale(5.0);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
<ul>
<li><a href="#"><img alt="Wave" src="https://photos.bravenet.com/292/091/931/5/E73EB11C01.gif" /></a></li>
</ul>
Explanation
<title></title>
<style type="text/css">ul {
padding: 0;
margin: DOWN50px ACROSS20px; POSITION ON PAGE
list-style: none;
}
ul li {
margin: DISTANCE BETWEEN PHOTOS5px;
display: inline-block;
}
ul li a {
padding: 5px;
display: inline-block;
border: 1px solid #f2f2f2;
}
ul li a img {
width: PHOTOSIZE125px;
height: PHOTOSIZE125px;
display: block;
}
ul li a:hover img {
transform: scale(RATIO5.0);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
<ul>
<li><a href="#"><img alt="TITLEwave" src="https://photos.bravenet.com/292/091/931/5/E73EB11C01.gif" /></a></li>
</ul>
Original Untouched Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Image Transform Gallery</title>
<style type="text/css">
ul {
padding: 0;
margin: 50px 20px;
list-style: none;
}
ul li {
margin: 5px;
display: inline-block;
}
ul li a {
padding: 5px;
display: inline-block;
border: 1px solid #f2f2f2;
}
ul li a img {
width: 125px;
height: 125px;
display: block;
}
ul li a:hover img {
transform: scale(1.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<ul>
<li><a href="#"><img src="/examples/images/club.jpg" alt="Club Card"></a></li>
<li><a href="#"><img src="/examples/images/diamond.jpg" alt="Diamond Card"></a></li>
<li><a href="#"><img src="/examples/images/spade.jpg" alt="Spade Card"></a></li>
<li><a href="#"><img src="/examples/images/heart.jpg" alt="Heart Card"></a></li>
</ul>
</body>
</html>