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
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
| .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;
} |
.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
1
2
3
4
5
6
| <div class="post">
<img src="berg.jpg">
<div class="post-s">
<h2>Hello</h2>
</div>
</div> |
<div class="post">
<img src="berg.jpg">
<div class="post-s">
<h2>Hello</h2>
</div>
</div>
Wie kann man mehrere Bilder mit demselben Effekt nebeneinander bekommen?
also – als erstes legst du eine div klasse an und zwar so, dass sie alle deine beiden oder mehrere post classen umfasst und dann fasst du den container in display:flex und flex-direction: row – das sollte der trick sein…
klingt kompliziert – ich habs dir mal kurz in ein codepen file gesteckt – https://codepen.io/chefblogger/pen/VwLQYOE
hoffe du kannst damit was anfangen 🙂
Moin und Danke – das war eine wirklich hilfreiche Anleitung. Leider stehe ich auf dem Schlauch, wie es weiter geht. Ich habe ein paar Bilder angelegt, die nicht mehr in einer Reihe darzustellen sind. Mit flex kann ich entweder eine Reihe oder eine Spalten erstellen – was mache ich, wenn ich einfach ein Raster haben möchte – viele Bilder aneinander, soweit der Bildschirm reicht, dann Umspringen auf die nächste Reihe? Ich habe das Gefühl, dass die Antwort beschämend einfach ist, aber ich komme einfach nicht drauf. Zu hülf, bitte. Danke!
Hi Katrin. Nun dann müsstest du so mit grid-tamplate-colums usw arbeiten – das sind spezielle css befehle.
da muss man also das ganze system komplett anders aufbauen. wenn ich mal zeit finde, kann ich ja dafür eine neue anleitung machen
Servus!
Ich habe ein Bild, wo ich mehrere Texte im Hover einfügen will. Früher habe ich das mit Coords gemacht (Beispiel coords=“175,345,256,411″) – kann ich das im CSS so eingeben und er weiß was ich meine? Oder muss ich eine anderes Format dafür nehmen?
Danke schon mal 🙂
Hallihallo, ich bin auf der Suche nach der Lösung für einen Hover-Effekt neben dem Bild, so wie hier https://trufcreative.com/ beim Logo … Finde ich total cool. Das sich das Logo ändert wäre nicht nötig, aber ich würde echt gerne wissen, wie man den Text-Slide hinkriegt 🙂 und wäre über Hife wirklich dankbar!