WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Bilder Text Hover Effekt / Text Overlay (Nur CSS und HTML) [Anleitung / Tutorial]

von | Sep 26, 2019 | Allgemein | 6 Kommentare

Schlagwörter: CSS - Tutorial

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

HTML

1
2
3
4
5
6
<div class="post">
    <img src="berg.jpg">  
    <div class="post-s">
    <h2>Hello</h2>
    </div>
</div>




6 Kommentare

  1. Philipp Schäfer

    Wie kann man mehrere Bilder mit demselben Effekt nebeneinander bekommen?

    Antworten
    • Eric-Oliver Mächler

      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 🙂

      Antworten
  2. Katrin

    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!

    Antworten
    • Eric-Oliver Mächler

      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

      Antworten
  3. Fiji

    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 🙂

    Antworten
  4. Carmen

    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!

    Antworten

Trackbacks/Pingbacks

  1. Bilder Text Hover Effekt / Text Overlay (Nur CSS und HTML) [Anleitung / Tutorial] | Nikkies Tutorials - […] Quellcode findet man hier: https://www.chefblogger.me/2019/09/26/bilder-text-hover-effekt-text-overlay-nur-css-und-html-anleitu… —————– Mein Blog über WordPress, Social Media und Online […]

Einen Kommentar abschicken

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