Azi este Vineri, 4 de Aprilie.2017

cu reduceri

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.

Related Posts:

  • Transforma online fotografii in imagini "Polaroid"Cu ajutorul Instantizer se poate transforma cu usurinta o fotografie aleasa din PC intr-o imagine polaroid.Pentru inceput selectionezi imaginea click pe "Select A Picture", poti adauga o mica descriere "Add A Brief Descriptio… Read More
  • Foto Flexer - site gratuit de editare imagini Cu ajutorul Foto Flexer se poate edita imagini online foarte usor.Cateva dintre posibilitatile de editare: reducere de dimensiuni ale imagini, schimbarea contrastului, luminozitati, culori, adaugare de efecte pe imagine, ada… Read More
  • Efect Zoom - InfoAVATARImaginea 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 d… Read More
  • Generator de imagini curioaseUn truc online !!! cu ajutorul acestei pagini web se poate edita o imagine pe .care doresti sa apara un text explicativ . Rezultatul este destul de simpatic sau nu depinde de gustul fiecaruia.Sursa Lintukoto… Read More
  • Editor imagine cu efect 3D - Imagina 1.4Atractiv editor de prelucrare a fotografiei cu efect 3D se diferentiaza de alte editoare de imagine prin simplitatea de lucru si in special cu efectele pe care le poti adauga unei imagini.Obtiunea instalata in editor 3D trans… Read More

4 comentarios:

  1. excelent !
    cum fac sa am si eu manutza asta pe blogul meu?

    RăspundețiȘtergere
  2. Buna Thamara in primul rand multumesc pentru vizita , acum pentru adaugarea unei imagini (vezi exemplul de mai sus) trebuie sa vad sablonul blogului tau si dupa aceea te pot ajuta.

    RăspundețiȘtergere
  3. Imi este de folos blogul tine-o tot asa:) Multumim pt sfaturi!!!

    RăspundețiȘtergere
  4. Salut Roberto, multumesc pentru apreciere si te astept cat mai des pe aici.

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc