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);
} |
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