Im heutigen Video stelle ich euch einen sehr einfachen aber wirkungsvollen Mouse Hover Effekt vor. Als erstes seht ihr ein einfaches Bild und wenn ihr mit der Maus darüber fährt, startet der Mouse Hover Effekt und ihr seht eine farbige Fläche inkls eines Titels.
Dieser Effekt ist so einfach, den kann man sehr einfach in sein WordPress einbauen und verschönern und anpassen 🙂 Perfekt für jeden Anfänger
Video / Anleitung
HTML
1 2 3 4 5 6 | <div class="container">
<img src="deinbild.jpg">
<div class="overley">
<h1>Your text</h1>
</div>
</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .container{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
overflow: hidden;
}
.container img{
width: 100%;
height: 100%;
}
.container .overley{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: rgba(204, 36, 20,.6);
transform: translateY(100%);
transition: .4s;
}
.container .overley h1{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-transform: uppercase;
padding: 15px 10px;
border: 3px solid #fafafa;
color: #fafafa;
}
.container:hover .overley{
transform: translateY(0);
} |
Hallo und vielen Dank für die tolle Anleitung.
Wenn ich den Effekt unter Firefox „Bildschirmgröße testen“ ausprobieren will, funktioniert der Effekt leider nicht. Wie lläßt sich dies ändern?
Vielen Dak und schöne Grüße