Genialer CSS Mouse Hover Effect

Heute habe ich mal wieder eine extrem kreativer Mouse Hover Effekt für euch als Video verarbeitet. Damit kann man nicht nur ein Farbeffekt über das Bild legen, sondern es wird sogar mit einem Text Effekt kombiniert.

Video Anleitung

Quellcode

Denkt einfach daran, HTML Code in den HTML Bereich, CSS in den style.css und dann sollte es gehen 🙂

Der HTML Code

<div class="container">
        <div class="berg image">
        <div class="label">Berg</div>
        </div>
        
    </div>

Der CSS Code

body {
        margin: 0;
        padding: 0;
        background-color: #262626;
    }
    .container {
        
        height: 450px;
        width: 200px;
        position: absolute;
        margin: auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background-color: white;
    }
    .image {
        height: 450px;
        width: 200px;
        transition: 1s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .image:hover {
        box-shadow: inset 0 0 0 0 rgba(255,255,255,0.7);
    }
    .label {
        color: white;
        height: 35px;
        width: 150px;
        font-size: 30px;
        text-align: center;
        padding-top: 50px;
        padding-bottom: 50px;
        border-top: 1.5px solid white;
        border-bottom: 1.5px solid white;
        transition: 0.5s;
        text-transform: uppercase;
    }
    .image:hover .label
     {
         font-size: 0;
         border:none;
    }
    .berg {
        background: url("berg.jpg");
        background-repeat: no-repeat;
        background-size:cover;
        box-shadow: inset 0 0 10px 100px rgba(135,38,158,0.7);
    }