Zoom-Effekt

Zoom-Effekt f�r Bilder :

Hier einige Zoom-Beispiele.

Einfacher Zoom Bildmitte:

.zoom img {
max-width: 100%;
transition: all 1s ease; }

.zoom:hover img {
transform: scale(2.0); }

Zoom nach Rechts:

.zoom img {
max-width: 100%;
margin-left: 0px;
transition: margin 1s ease;
transition: all 1s ease; }

.zoom:hover img {
transform: scale(2.0);
margin-left: -100px; }

Zoom Oben + Rechts:

.zoom img {
max-width: 100%;
margin-left:0px;
margin-top: 0px;
transition: margin 1s ease;
transition: all 1s ease; }

.zoom:hover img {
transform: scale(2.2);
margin-left: -100px;
margin-top: 70px; }

Zoom heraus

.zoom img {
max-width: 100%;
transition: all 1s ease;
transform: scale(2.2); }

.zoom:hover img {
transform: scale(1.0); }

Schritt 1: HTML-Code f�r Seiteninhalt

- auf "Seiten" klicken
- w�hle Seite aus, wo Bild hinein soll
- im Editor oben (Werkzeugleiste) auf "Quellcode" klicken
- Seite ist nun in der HTML-Code-Ansicht
- f�ge folgenden HTML-Code ein

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

ODER ... wenn Ihr das Bild mit einer Seite verlinken m�chtet:

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

Schritt 2: Der CSS-Code

- gehe auf "Extras"
- verwende das Feld "Eigener <head> - Inhalt"
- f�ge dort ein:

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

-->
</style>

Schritt 3: CSS-Code f�r gew�nschten Effekt

w�hle einen der CSS-Codes neben den Beispielbildern aus
und f�ge diesen vor dem --> </style> mit ein.

FB Messenger:

Anklicken und im Messenger schreiben

weitere Tutorials :

Boxen

mehr

Zoom-Effekt

Zoom-Effekt f�r Bilder :

Schritt 1: HTML-Code f�r Seiteninhalt

Schritt 2: Der CSS-Code

Schritt 3: CSS-Code f�r gew�nschten Effekt

FB Messenger:

weitere Tutorials :

Seitentipps

Testbox 1

Testbox 2

Zoom-Effekt

Zoom-Effekt f�r Bilder :

Schritt 1: HTML-Code f�r Seiteninhalt

Schritt 2: Der CSS-Code

Schritt 3: CSS-Code f�r gew�nschten Effekt

Forum Login

Info zum Login

FB Messenger:

weitere Tutorials :

Seitentipps

Testbox 1

Testbox 2