fíjate si esto te sirve cualquier duda pregunta y tratare de responderte
en el html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="mijquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
<title>Photo Zoom Out Effect with jQuery</title>
</head>
<body>
<div id="container" class="container">
<div class="wrap"><img src="images/image1.jpg" alt="Picture 1" id="img1"/></div>
<div class="wrap"><img src="images/image2.jpg" alt="Picture 2" id="img2"/></div>
<div class="wrap"><img src="images/image3.jpg" alt="Picture 3"/></div>
<div class="wrap"><img src="images/image4.jpg" alt="Picture 4"/></div>
<div class="wrap"><img src="images/image5.jpg" alt="Picture 5"/></div>
<div class="wrap"><img src="images/image6.jpg" alt="Picture 6"/></div>
</div>
<div>
<div id="1">1</div>
<div id="2">2</div>
</div>
</body>
</html> hace un JS con el nombre funciones.js y ponelo en la misma carpeta
con el código
Código:
$(function() {
$('#1').click(
function(){
$("#img1").stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
}
);
$('#2').click(
function(){
$("#img2").stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
}
);
});
pone el style.css en la misma carpeta
con el código
Código:
*{
margin:0;
padding:0;
}
body{
background:#fff url(../title.png) no-repeat 25% 20px;
}
.container{
width:600px;
height:400px;
margin:100px auto 0px auto;
border:10px solid #333;
-moz-box-shadow:1px 1px 12px #000;
-webkit-box-shadow:1px 1px 12px #000;
box-shadow:1px 1px 12px #000;
}
.wrap{
width:200px;
height:200px;
margin:0px;
overflow:hidden;
position:relative;
float:left;
}
.wrap img {
border:none;
position:absolute;
top:-66.5px;
left:-150px;
height:500px;
opacity: 0.5;
-moz-opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
PD hay llamo al archivo de jquery en mi pc para que esto funcione bajalo de la página oficial, cambiale el nombre a mijquery y ponelo en la misma carpeta
luego me dices si te funciono y si era lo que buscabas
