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

.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

<div class="post">
    <img src="berg.jpg">  
    <div class="post-s">
    <h2>Hello</h2>
    </div>
</div>