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