Genialer CSS Mouse Hover Effect

von | Nov 15, 2019 | Mein Youtube Kanal | 1 Kommentar

Schlagwörter: CSS - HTML

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

1
2
3
4
5
6
    <div class="container">
        <div class="berg image">
        <div class="label">Berg</div>
        </div>
 
    </div>

Der CSS Code

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
    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);
    }




1 Kommentar

  1. Rabia Celik

    Hallo Herr Mächler,

    ich habe leider kein Bild hinzufügen können. Wie muss es im Code aussehen wenn ich ein Bild aus dem Internet einfügen möchte? Oder ein Bild, das auf meinem Rechner lokal gespeichert ist?

    Viele Grüße
    Rabia

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung