duplicar div y efectos

rascabuchitos · #1 (**permalink**) 15/03/2013, 01:52

hola amigos
encontre este codigo en internet para reemplazar una imagen con efecto dentro de un div pero cuando intento duplicarlo, porque quiero tener 10 div mas con la propiedad float:left; todo se distorsiona

desde ya
muchas gracias por su orientacion

Código CSS:

Ver original<style type="text/css">
#swop1, #swop2 { position:absolute; top:50px; left:50px; width:150px; height:150px; }
#swop1 { background:url('1.jpg'); }
#swop2 { background:url('2.jpg'); display:none; }
</style>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
        {
        $('#swop1').mouseover(function(){ $('#swop2').fadeIn(500)});
        $('#swop2').mouseout(function(){ $('#swop2').fadeOut(500)});
            });
</script>
 
</head>
<body>
 
<div id="swop1"></div>
<div id="swop2"></div>