Guten Morgen zusammen,
ich non mal wieder am Arbeiten und hab daher
mal wieder eine Frage - aber ich lerne ja noch :-)
Ich habe ein paar Bilder.
Wenn ich mit der Mouse auf ein Bild wandere,
soll es sich vergrößern.
Dazu verwende ich den folgenden Code:
Der HTML-Code sieht so aus:
Jetzt möchte ich erreichen, dass die DIV-Kreise erst eingeblendet
werden, wenn der Zoom auf dem Bild vollbracht ist. Wenn ich die
Mouse wieder wegbewege, sollen auch die DIV-Kreise verschwinden.
Ist sowas möglich? - Wie kann ich ggf. sowas realisieren?
VG, David
ich non mal wieder am Arbeiten und hab daher
mal wieder eine Frage - aber ich lerne ja noch :-)
Ich habe ein paar Bilder.
Wenn ich mit der Mouse auf ein Bild wandere,
soll es sich vergrößern.
Dazu verwende ich den folgenden Code:
Code:
img.zoom {
transition: transform 0.8s;
-moz-transition: transform 0.8s;
-webkit-transition: transform 0.8s;
-ms-transition: transform 0.8s;
-o-transition: transform 0.8s;
}
img.zoom:hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5);
-o-transform: scale(1.5, 1.5);
z-index:10;
}
Der HTML-Code sieht so aus:
HTML:
<div class="row">
<div class="col-md-3">
<img id="pic1" class="elternelement zoom" src="img/1.jpg" alt="Smiley face">
<div class="kreis">Test</div>
<div class="kreis">Test</div>
<div class="kreis">Test</div>
<div class="kreis">Test</div>
</div>
</div>
Jetzt möchte ich erreichen, dass die DIV-Kreise erst eingeblendet
werden, wenn der Zoom auf dem Bild vollbracht ist. Wenn ich die
Mouse wieder wegbewege, sollen auch die DIV-Kreise verschwinden.
Ist sowas möglich? - Wie kann ich ggf. sowas realisieren?
VG, David