<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="posicLSG.css">
</head>
<body>
<div class="upLSG"><img src="img1.jpg"></div>
<div class="downLSG"><img src="img1.jpg"></div>
<div class="leftLSG"><img src="img1.jpg"></div>
<div class="rightLSG"><img src="img1.jpg"></div>
</body>
</html>
----------------------------------
posicLSG.css:
img {
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-ms-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
.upLSG img:hover { margin-top: 0px; }
.downLSG img:hover { margin-top: 140px; }
.leftLSG img:hover { margin-left:-10px; }
.rightLSG img:hover { margin-left:150px; }
Más información en http://html5tutoriales.com/
No hay comentarios:
Publicar un comentario