Bildwechsel bei 'mouse over'
- Mit Verschiebung der Maus über ein Bild kann eine Aktion ausgelöst werden
- Hier dreht sich die Person in Richtung Betrachter
- Ob der Effekt gefällt, ist Geschmackssache.
- Ich finde, das Team erhält so mehr Aufmerksamkeit. Gut so.
🙄
Keine Zeit? Zu kompliziert?
Gerne übernehme wir die Umsetzung!
Gerne übernehme wir die Umsetzung!
Bildwechsel mit Wordpress:
DIVI Pagebuilder
Bei der website der Kaformatik AG läuft mit Wordpress. Dort ist der Effekt mithilfe des DIVI Pagebuilders mit einigen Klicks erledigt. Siehe hier:
Bildwechsel mit Wordpress:
html/css
Falls Sie keinen Pagebuilder wie DIVI verwenden geht auch mit html/css Code.
Ein Bespiel mit Wordpress finden Sie auch auf kaformatik.ch.
Code: html/css
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Hover Effect</title>
<style>
.image-container {
display: inline-block;
overflow: hidden;
transition: border 0.5s;
}
.image-container img {
display: block;
border: 8px solid white;
border-radius: 12px;
transition: opacity 0.5s, border-radius 0.5s;
}
.image-container img:first-child {
position: absolute;
opacity: 0;
}
.image-container:hover img:first-child {
opacity: 1;
}
.image-container:hover img:last-child {
opacity: 0;
}
</style>
</head>
<body>
<div class="image-container">
<img src="/content/images/2025/01/2024.04.21_peter06.jpg" alt="peter01">
<img src="/content/images/2025/01/2024.04.21_peter01.jpg" alt="peter06">
</div>
</body>
</html>