Efect Zoom - Info

AVATAR

Imaginea este din filmul Avatar.Acesta este un exemplu de zoom pe imagine cu titlu si text incorporat.

Cu ajutorul unui script obtinem un interesant efect zoom pe o imagine si text ascuns care apare la o simpla trecere de mouse.

Daca utilizezi jQuiery deja ai instalat in Editorul HTML de pe blogul tau scriptul respectiv daca nu, atunci adauga inainte de </head> codul de mai jos:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

si in continuarea codului de mai sus adaugam urmatorul javascript:

<script type='text/javascript'>
$(document).ready(function()
{
$(&#39;.galleryImage&#39;).hover(
function()
{

$(this).find(&#39;img&#39;).animate(
{ width:100,
marginTop:10,
marginLeft:10
}, 500);

},
function()
{

$(this).find(&#39;img&#39;).animate(
{width:325,
marginTop:0,
marginLeft:0
},300);

});
});
</script>

acum adaugam stilul CSS (URMATORUL COD) inainte de ]]></b:skin>

.galleryContainer
{
width: 1024px; /* Ancho del contenido */
}
.galleryImage { /* Las imágenes */
background-color:black;
width:325px;
height:260px;
overflow:hidden;
margin:5px;
float:left;
}
.info{ /* Texto adicional */
margin-left:10px;
font-family:arial;
padding:3px;
}
.info h2{ /* Títulos */
color:gray;
}
.info p {
color:white;
}
.clear {
clear:both;
margin-top:10px;
}

salveaza modificarile
si treci la urmatorul pas; intr-o postare noua adauga codul html de mai jos:

<div class="galleryContainer">
<div class="galleryImage">
<img src="url-imagine">
<div class="info">
<h2>Títlu</h2>

Aici vine textul informativ

</div>
</div>
</div>

Ultimele modificari: inlocuiesti "Titlu" si "Aici vine texrul informativ" cu datele care doresti sa apara si nu uita sa schimbi "url-imagine" cu url-ul imagini care vrei sa apara in postare.