• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Nach Zoom bei Hover, weiteres DIV einblenden?

D

Dsimon24

Mitglied
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:

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
 
Werbung:
Dsimon24 schrieb:
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:

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
Zum Vergrößern anklicken....

CSS: 
img.zoom ~ .kreis {
  transition: all .8s;
  transition-delay: .8s;
  opacity:0;
}
img.zoom:hover ~ .kreis {
  opacity:1;
}
 
Werbung:
So, ich habe jetzt mal ein wenig rumgebastelt.
Ich möchte, dass sich mein Container mit dem Bild bei Mouse-
over vergrößert und dann die Kreise angezeigt werden. Wenn
ich den Container mit der Mouse verlasse, soll er sich wieder
verkleinern und die Kreise sollen ausgeblendet werden.

In der Startposition sind die Kreise nun auch ausgeblendet,
jedoch werden sie beim zoomen nicht eingeblendet. Sieht
jemand den Fehler, den ich leider nicht sehe?

Mein HTML-Code:
HTML: 
<div class="elternelement1 flex-container zoom">
    <div class="kreis">Test</div>
    <div class="kreis">Test</div>
    <div class="kreis">Test</div>
    <div class="kreis">Test</div>
</div>

Mein CSS-Code:
Code: 
/* --- Bereich: Container der Bilder --- */

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
        position: absolute;
      padding: 10px; 
    height: 175px;
      width: 260px;
}

.elternelement1 {
    background-image: url("../img/1.jpg");
}


/* --- Bereich: Kreiselemente --- */

.kreis {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #ff00ff;
    position: relative;
    opacity: 0;
}


/* --- Bereich: Verhalten --- */

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

.zoom:hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(1.65, 1.65);
-moz-transform: scale(1.65, 1.65);
-webkit-transform: scale(1.65, 1.65);
-ms-transform: scale(1.65, 1.65);
-o-transform: scale(1.65, 1.65);
z-index:10;
}

.zoom:hover ~ .kreis {
    opacity: 1;
}


Ich hoffe, man versteht einigermaßen, was ich da gebastelt habe...
 
Dsimon24 schrieb:
So, ich habe jetzt mal ein wenig rumgebastelt.
Ich möchte, dass sich mein Container mit dem Bild bei Mouse-
over vergrößert und dann die Kreise angezeigt werden. Wenn
ich den Container mit der Mouse verlasse, soll er sich wieder
verkleinern und die Kreise sollen ausgeblendet werden.

In der Startposition sind die Kreise nun auch ausgeblendet,
jedoch werden sie beim zoomen nicht eingeblendet. Sieht
jemand den Fehler, den ich leider nicht sehe?

Mein HTML-Code:
HTML: 
<div class="elternelement1 flex-container zoom">
    <div class="kreis">Test</div>
    <div class="kreis">Test</div>
    <div class="kreis">Test</div>
    <div class="kreis">Test</div>
</div>

Mein CSS-Code:
Code: 
/* --- Bereich: Container der Bilder --- */

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
        position: absolute;
      padding: 10px;
    height: 175px;
      width: 260px;
}

.elternelement1 {
    background-image: url("../img/1.jpg");
}


/* --- Bereich: Kreiselemente --- */

.kreis {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #ff00ff;
    position: relative;
    opacity: 0;
}


/* --- Bereich: Verhalten --- */

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

.zoom:hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(1.65, 1.65);
-moz-transform: scale(1.65, 1.65);
-webkit-transform: scale(1.65, 1.65);
-ms-transform: scale(1.65, 1.65);
-o-transform: scale(1.65, 1.65);
z-index:10;
}

.zoom:hover ~ .kreis {
    opacity: 1;
}


Ich hoffe, man versteht einigermaßen, was ich da gebastelt habe...
Zum Vergrößern anklicken....

Die CSS Selektoren sind ganz einfach falsch...
Statt "~" kommt in dieser Konstellation der Child-Selektor ">" bzw. gar nichts.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben