hepvarhicyok

zom etkisi

Görüntüler için etkisi zoom:

Einfacher zum Bildmitte:

zumlama img {
en fazla Genişlik: % 100;
geçiş: tüm 1s kolaylığı;}

.zoom:hover IMG {
dönüşümü: scale(2.0);}

Nach Rechtszoom:

zumlama img {
en fazla Genişlik: % 100;
kenar boşluğu sol: 0px;
geçiş: kenar boşluğu 1s kolaylığı;
geçiş: tüm 1s kolaylığı; }

.zoom:hover IMG {
dönüşümü: scale(2.0);
kenar boşluğu sol:-100px; }

Zoom Oben + Rechts:

zumlama img {
en fazla Genişlik: % 100;
kenar boşluğu-sol: 0px;
üst kenar boşluğu: 0px;
geçiş: kenar boşluğu 1s kolaylığı;
geçiş: tüm 1s kolaylığı; }

.zoom:hover IMG {
dönüşümü: scale(2.2);
kenar boşluğu sol:-100px;
üst kenar boşluğu: 70px; }

Heraus zoom

zumlama img {
en fazla Genişlik: % 100;
geçiş: tüm 1s kolaylığı;
dönüşümü: ölçek (2.2);}

.zoom:hover IMG {
dönüşümü: ölçek (1.0); }

Schritt 1: HTML-kodu für Seiteninhalt

<div class="zoom">
<img src="GRAFIKADRESSE" alt="Bildinfo" />
</div>

<div class="zoom">
<a href="LINK"> <img src="GRAFIKADRESSE" alt="Bildinfo" /> </a>
</div>

Adım 2: CSS kodu

<style type="text/css"> <!--
.zoom {
     width: 220px;
     height: 220px;
     overflow: hidden;
     border: 1px solid #ccc;
     box-shadow: 10px 10px 15px #333;
}

--> </style>

Adım 3: CSS kodu için istenen etkiyi