Powiększające się zdjęcie

Dla specjalistów Webmastering
#1

Witam jak zrobić efekt powiększania zdjęcia po najechaniu kursorem chodzi o to żeby nie wychodziło poza obszar okienka tylko powiększało się w nim, tak jak jest to zrobione na tej stronie:

#2

Ja bym do tego celu wykorzystał dwa efekty CSS - transistion oraz transform. Jeśli chodzi o kod HTML to po prostu zamykasz obrazek w DIV, któremu nadajesz wymiary (height i width obrazka oraz overflow:hidden;). Następnie musisz zrobić trzy selektory w CSS, których zadaniem będzie ostylowanie trzech elementów: 1) diva, w którym znajduje się obrazek; 2) samego obrazka; 3) oraz hover dla tego obrazka. Wydaje mi się, że efekt będzie podobny do tego oczekiwanego. Sprawdziłem na FF i Chrome i działa prawidłowo.

Kod html:

<div class="kontener">
  <img src="http://www.avatarswizard.com/uploads/av/2010-10/1286202147_302611113_5a633b9be4.jpg">
</div>

Kod css:

.kontener {
    height:150px;
    width: 150px;
    overflow: hidden;
}

.kontener img {
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}

.kontener img:hover {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);
}

 

#3

Wielkie dzięki właśnie tego potrzebowałem.