Zwei Bilder ineinanderfügen
CSS Hover-Effekt + HTML

image
image

Die Idee zwei Bilder hintereinander und somit das nächst Bild erst mit überfahren der Maus sichtbar ist. Also ein Bild zum anderen. Das ist im Netz den Begriffen wie 'CSS Bild Hover-Effekt' zu finden. So einfach und leicht ist da der Durchblick nicht. … Das geht so mit CSS + HTML. Hier ist das nun ganz kurz auseinandergelegt. Und zwar so, dass dann dem Bild keine Umrandung folgt und gültigen HTML. Das ist erst mal Mithilfe von Internet-Freund! – dem ich so auch mein Dankeschön kundtun darf.

CSS Hover Effekt und HTML das Bild

Im Weiteren darf ich bitten zu den hiesigen Beispielen.

Das ein Bild zum anderen Bild in von bspw. Erst mal ist im Customizer die Class. Das ist für das HTML dann die Class image-mouseover.

CSS

.image-mouseover {
position: relative;
width: 110px;
height: auto;
float: left;
margin: 0 15px 15px 0;
}

.image-mouseover .before {
z-index: 1;
}

.image-mouseover:hover .after {
display: block;
}

.image-mouseover .after {
display: none;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}

Dank an Kevin P.

HTML

<div class="image-mouseover">
<img class="before" src="https://../foto-wegerl.svg" />
<img class="after" src="https://../2.foto-wegerl.svg" /></div>

Dank an Kevin P.

Links

10 Simple CSS Hover Effects

Hiesig Beispiele

Tab 1: Der Änderung von S / W auf farbig + Bilder nach rechts floaten.

Tab 2: Text zwischen die zwei Bilder + dasselbe durch opacity zum langsamen Übergang.
Tab 3: Drittes Bild zwischen die zwei Bilder + Den Hover-Effekt mit @keyframes stylen

Tab 4: Worauf bei so unterschiedlichen SVG-Bilder zu achten ist.

1

Der Änderung von S / W auf farbig
Bilder nach rechts floaten

… hier ist das in der Fußleiste, dort steht 'WER BIN ICH…?'

Der Änderung von S / W auf farbig ist ein und dasselbe Bild. Also ohne Veränderung des zweiten Bilds und somit nur der Unterscheidung von Farbton. Dies ergeht hier so folgend …

Bild mit Class grayscale

Im Customizer ist eine weitere Class zu erstellen.

CSS

/* grayscale(wert) – Graustufe */
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}

HTML bspw.

<div class="image-mouseover">

<img class="before grayscale alignleft" style="margin-right: 10px;" src="https://..Foto.jpeg" alt="image" width="125" height="auto" />

<img class="after alignleft" style="margin-right: 10px;" src="https://..Foto.jpeg" alt="image" width="125" height="auto" />

</div>

Die Bilder nach rechts floaten

Die beiden Bilder auf die rechte Seite floaten: style="float: right;

HTML bspw.

<div class="image-mouseover" style="float: right;">

<img class="before alignright" style="margin-top: 5px; margin-bottom: 5px; margin-right: -9px;" src="https://../apfel.svg" alt="image" width="110" height="140" />

<img class="after alignright" style="margin-top: 5px; margin-bottom: 5px;" title="… Hurra da bin ich!" src="https://../apfelwurmi.svg" alt="image" width="110" height="140" />

</div>

Man möchte  sich da auch ein bisschen spielen ob mit alignright oder so alignnone und den Margins.

2

Text zwischen die zwei Bilder

Dem Beispiel ist da der Text zwischen die zwei Bilder zu setzten. … onmouseover erst mal das Bild.

Farbroller1b

d.h. hier in 8-Tage: 10 x
… ich danke ziemlich! –.

image

Weiter des Beispiels. Die beiden Bilder sind SVG. Somit ist das eine Bild im Boxy-SVG zu arrangieren, wie das zweite Bild so mit Hintergrund zu erstellen.

Folgend nun das HTML, wobei da mittig der Text in blau* ist.

*Das da mit den Shortcodes dabei, das geht hier Beispiels aus dem Plug-in 'Add-on das Statify Widget +' hervor.

<span style="font-size: 14px;"><strong>Hallo! – besuch ebenda…</strong></span>

<div class="image-mouse" style="margin-top: -15px;">

<img class="before alignnone" src="https:../farbroller1b.svg" alt="Farbroller" width="" height="" />
<p style="margin-top: -68px; font-size: 15px; text-align: right;">[statify-count prefix="d.h. hier in 8-Tage:" suffix="x"]
… ich danke ziemlich! –.</p>
<img class="after alignnone;" src="https://../farbroller-mit-hintergrund.svg" width="" height="" />

</div>

Natürlich ist zur obigen Class image-mouse diese auch zu erstellen. Die ist ähnlich wie das vorherige Beispiel:

CSS

.image-mouse {
position: relative;
width: 170px;
height: 53px;
float: left;
margin: 5px 10px 10px 0;
}

.image-mouse .before {
z-index: 1;
}

.image-mouse:hover .after {
display: none;
}

.image-mouse .after {
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}

Na ja! – so ganz zufrieden kann man hier dem ruckzuck des Bilds aus- und einblende noch nicht sein.

Darum folgen wir einem Link im Titel 'Demo 1 – Ein Bild zum anderen beim Schweben'. Der Link zur Website ist ohne SSL, darum Copy & Paste in Browsers Adresszeile:

 http://css3.bradshawenterprises.com/cfimg/#cfimg1 

Beispiel w. o., aber mit opacity. So nimmt das Auge den Farbroller wie nach li / re gescrollt wahr.

d.h. hier in 8-Tage: 10 x
… ich danke ziemlich! –.

auto


Der Autor dort der Website arbeitet mit ID anstatt mit Class. Daher … und das nun als Merkzettel:

HTML bspw.

<div id="cf" style="float: left;">

<img class="bottom alignnone" src="https://../farbroller1b.svg" alt="" width="300" height="89" />
<p style="margin-top: -18px; font-size: 15px; text-align: right;">d.h. hier in 8-Tage: 10 x
… ich danke ziemlich! –.</p>
<img class="top alignnone" style="margin-top: -70px;" src="https://../farbroller1-dicht-hintergrund.svg" alt="" width="300" height="89" />

</div>

CSS

Das mit dem float: left; und die Margins sind hier auskommentiert. So ist es da auch zur Anwendungen des Codes zur individuellen Auszeichnung im HTML.

#cf {
position:relative;
width:170px;
height:53px;
/*float: left;*/
/*margin: -15px 10px 10px 0;*/
}

#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity .3s ease-in-out;
}

#cf img.top:hover {
opacity:0;
}

So ohne CSS-Schablonen wäre das alles schon zu kompliziert … und man ist sehr froh über solche Websites-Engagement http://css3.bradshawenterprises.com

3

Drittes Bild zwischen die zwei Bilder

… mit so Beispiel von solcher Animation:

 

Die Animation mit zwei Bilder.

Die Animation mit drei Bilder.



… das SVG-Bild erst mal zerlegen. Das sind dann so drei Teile. Das Erste in Original, das Zweite ohne Propeller und mit Hintergrund. Das dritte Bild der Propeller und ohne Hintergrund.

  1. Das erste Bild ist, welches erst mal sichtbar ist.
  2. Das zweite Bild ist ohne Propeller mit Hintergrund und so erst beim Überfahren mit der Maus sichtbar eben so durch den Hover. Durch das, dass das zweite Bild mit Hintergrund ist, so ist das Erste abgedeckt.
  3. Zugleich wird der Propeller vom dritten Bild visuell und ersetzt den Propeller vom ersten Bild. Und dieser soll sich nun auch drehen.

Das SVG ist von 'Clker-Free-Vector-Images' auf pixabay.

Es funkt auch so mit nur dem ersten und dritten Bild, die beide ohne Hintergrund sind. Die Animation wirkt aber viel besser mit den drei Bildern. Siehe hier nochmals oben.

Das CSS
  • Das CSS ist erst mal dasselbe wie ganz oben die zwei Bilder hintereinanderlegen im Titel 'CSS Hover Effekt und HTML das Bild'.
  • Im Zweiten ist eine weitere Class zu erstellen. Die ist für das Rotieren der Propeller.

CSS

/* Rotate horizontal=rotateY, Class myrot  */
.myrot:hover {
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotateY(720deg);
-moz-transform: rotateY(720deg);
-o-transform: rotateY(720deg);
-ms-transform: rotateY(720deg);
transform: rotateY(720deg);
}
Animation mit zwei Bilder
  • Da ist im zweiten Bild, das auch mit <img class="after…  dann die Class Namens myrot dabei.

HTML bspw.

<div class="image-mouseover">

<img class="before alignnone" style="margin-top: -18px;" src="https://../geek.svg" alt="" width="200" height="auto" />
<img class="after myrot alignnone" style="margin-top: -18px;" src="https://../geek-propeller.svg" alt="" width="200" height="auto" />

</div>
Animation mit drei Bilder
  • Hierbei ist dem mittleren Bild die die Class after
  • und dem folgenden Bild die Class aftermyrot.

HTML bspw.

<div class="image-mouseover" style="float: right;">

<img class="before alignnone" style="margin-top: -18px;" src="https://../geek.svg" alt="" width="200" height="auto" />
<img class="after alignnone" style="margin-top: -18px;" src="https://../geek-ohne-propeller-mit-hintergrund.svg" alt="" width="200" height="auto" />
<img class="after myrot alignnone" style="margin-top: -18px;" src="https://../geek-propeller.svg" alt="" width="200" height="auto" />

</div>

Danke für deine Aufmerksamkeit! – :-)

… Das Tun für die Website 🖇

Das HTML für da obig so bspw.

 <img class="myrot alignnone" style="margin-left: 155px; margin-bottom: -10px; margin-top: 15px;" src="https://../geek.svg" alt="" width="100" height="auto" />

Den Hover-Effekt stylen mit @keyframes

HTML

<div class="animation"></div>

Das CSS … siehe https://jsfiddle.net/Pixelbart/guv74djb/. Das war mir zum Einstieg mit den @keyframes sehr hilfreich. Danksagung an Kevin P.

Ebenso ist das über mehrere Bildwechsel anzuwenden. D. h. so wie 0%, 20%, 40%, 60%, 80% und 100%.

  • Hinzuweisen ist da noch auf animation-iteration-count. Das ist dann so für die Wiederholungen. Usw. Und dort ist das alles erst mal der li. Seitenleiste unter 'Eigenschaften' zu finden …

4

Das, worauf so SVG-Bilder zu achten ist

Das, worauf so SVG-Bilder zu achten ist, das ist der Hintergrund.

Das Erste ist nun mal so visuell und das Zweite nicht sichtbar. Das Zweite SVG gehört normal mit Hintergrund, da so ohne Hintergrund dann auch das erste Bild mit sichtbar ist. Zu erkennen ist das auch eingangs oben dem Apfellogo, die SVGs sind aber fast identisch. Das zweite SVG ist da ohne Hintergrund und dort ist der Unterschied der Bilder nicht so groß. – gefällt auch?

Weiter nun für das Bild mit Hintergrund, das für class="after". Bspw. im Boxy-SVG-Editor das 'Rektangel' darüber legen, die Farbe dann dem Hintergrund passend und das Rechteck in den Hintergrund tun.

Das Beispiel ist CSS wie in der Einführung hier ganz oben der Website, also mit .image-mouseover

Das SVG-Bild in class="after" ohne Hintergrund.

… vs. class="after" das SVG mit Hintergrund.

 

… oder auch so Kreativ?

… Und wie ist dein Erfolg des Beitrags?