Halber Hover Effekt für Bilder (Nur CSS und HTML) [Anleitung / Tutorial]

Wenn man einen Hover Effekt machen möchte, dann sieht man oft dass dieser Effekt das ganze Bild oder den ganzen Bereich ausfüllt. In diesem kleinen Tutorial zeige ich euch, wie man so ein Effekt aber nur für die Hälfte des Bildes macht. Und wenn man genau hinschaut, dann sieht dass diese Fläche nicht einfach reingefahren wird, sondern es so aussieht, als ob eine Türe halb zu geht.

So kleine Besonderheiten machen solche Effekte immer noch beeindruckender als sie sonst schon sind.

Video / Anleitung

CSS

.container {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 300px;
            height: 209px;
            background: #fff;
            overflow: hidden;
    }
    
    
    .container .bilderbox {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        overflow: hidden;
        transform: .5s;
    }
    
    .container .bilderbox img
    {
        width: 100%;
    }
    
    .container .content {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        background: #1d304c;
        padding: 40px 20px;
        box-sizing: border-box;
        transform-origin: left;
        transition: 1s;
        transform: rotateY(90deg);
       
    }
    
    .container .content h2 {
        margin: 10px 0;
        padding: 0;
        color: #fff;
        font-size: 25px;
    }
    
    .container .content p {
        margin: 0;
        padding: 0;
        color:darkgrey;
    }
    
    .container:hover .content {
        transform: rotateY(0deg) perspective(300px);
    }

HTML

<div class="container">
        <div class="bilderbox">
        <img src="fruechte.jpg"></div>
        <div class="content">
            <h2>hello</h2>
            <p>Du Früchtchen du</p>
        </div>
    </div>