Heute zeige ich euch, wie man einen Mouse Hover Effekt macht in dem man ein Text über ein Bild schiebt – diesen Effekt nennt man auch Text Overlay

Video / Anleitung

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
37
.post {
        width: 600px;
        height: 400px;
        position: relative;
        cursor: pointer;
    }
 
    .post:hover .post-s {
        width: 600px;
 
    }
 
    .post img {
        display: block;
        width: 600px;
        height: 400px;
 
    }
    .post-s {
        width: 0px;
        height: 400px;
        background: rgba(100,60,180,0.7);
        position: absolute;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.7s ease;
 
    }
    .post-s h2 {
        color:white;
        font-size: 50px;
        border: 6px solid white;
        padding: 10px 30px;
    }

HTML

1
2
3
4
5
6
<div class="post">
    <img src="berg.jpg">  
    <div class="post-s">
    <h2>Hello</h2>
    </div>
</div>