Azi este Sambata, 9 de August.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:

  • RAW Therapee - prelucrare fotografie gratisFotografie digitală implică importul, prelucrarea şi publicarea a sute şi chiar mii de fişiere foto, de obicei în format RAW, care necesită utilizarea de software specializat.Lider în acest tip de program este Photoshop Light… Read More
  • Mareste o imagine - "efectul zoom"Astazi vom vedea cum putem mări o imagine cu doar un singur clic şi în acelaşi post, fără a deschide o imagine completă în altă fereastră.Pentru a face acest lucru, trebuie să urmezi acesti paşi:Mergem la Aspect -- Editare HT… Read More
  • Editoare de imagine OnlineUnele dintre cele mai bune editoare de imagine online gasiti aici.In loc sa cheltui sute de dolari pe un program de editare foto/video profesional, poti lua in calcul alternative absolut gratuite, chiar daca functionalitatea … Read More
  • Prelucrare imagini - noua versiune PhotoScape 3.5PhotoScape 3.5 este un software gratis ce ne permite modificar imagini pentru a da un aspect placut si diferit fata de imaginea originala.De asemenea se poate realiza efecte de buna calitate inlocuind programe mai puternice c… Read More
  • Îmbunătăţirea fotografii onlineImprove Your Images este un instrument online care il recomand, nu trebuie să descărcaţi şi să instalaţi nimic. Într-un minut sau mai puţin poti îmbunătăţi fotografii, contrastul şi culoarea, tot ce trebuie să faci este să în… 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