Design Clean
    >> Tipps zum anpassen

Zoom-Effekt

Zoom-Effekt für Bilder :

Hier einige Zoom-Beispiele.


Ich

Einfacher Zoom Bildmitte:

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

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





Ich

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; }





Ich

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; }





Ich

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.






Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :4 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben