Support » Allgemeine Fragen » Image Text Overlay

  • Hallo,

    ich bin auf der Suche einen Weg zu finden ein Bild in WP mit einem Text bzw Transparenten Hintergrund + Text zu versehen.

    Ich habe im Netz sämtliche Varianten und Plugins gesucht, selbst bei der Bezeichnung bin ich an meine Grenzen gestoßen. es soll keine Hover-Animation sein sondern statisch und dauerhaft auf dem Bild liegen.

    Ein Beispiel habe ich hier erstellt: https://imgur.com/DASAOey

    Grundsätzlich empfinde ich das nicht als zu kompliziert, habe jedoch nichts gefunden…

Ansicht von 1 Antwort (von insgesamt 1)
  • Hallo,
    das kannst du über CSS relativ einfach einstellen.
    Beispiel bei einer Webseite, wo wir das im Slider einsetzen:

    /* Darstellung des Containers im Slider */
    /* hgg, 14.3.2020 */
    @media only screen and (min-width: 841px) {
    	[id^=customizr-slider-] .czrs-subtitle {
      	          font-size: 22px !important;
    	}
    	/* Text schmaler im Slider darstellen */
    	.carousel-caption {
    		  width: 50%;
    		  background: rgba(49,49,49,.6);
    		  padding-bottom: 20px;
    		  margin-bottom:20px;
    	}
    }
    
    @media only screen and (max-width: 840px) {
    	[id^=customizr-slider-] .czrs-subtitle {
      	          font-size: 11px !important;
    	}
    	/* Text schmaler im Slider darstellen */
    	.carousel-caption {
    		  margin-top: 20px;
    		  width: 70%;
    		  background: rgba(49,49,49,.6);	
    		  padding-bottom: 20px;
    		  margin-bottom:20px;
    	}
    }
    
    /* Überschrift Slider weiß */
    [id^=customizr-slider-] .czrs-title.very-big {
        color: #fff;
    }
    

    Über die developer console (F12) kannst du sehen, welche Klassen betroffen sind und die o. g. Lösung entsprechend angepasst einsetzen.
    Hier allerdings der Hinweis: Das ist eine Frage zu CSS und daher bieten wir in diesem Bereich keinen weiteren Support.
    Hättest du die URL für deine Webseite oben angegeben, hätte ich das dir genauer bezogen auf deine Webseite erklären können.
    Die entscheidende Stelle ist background: rgba(49,49,49,.6);, bei der opacity eingestellt ist (.6).
    Viele Grüße
    Hans-Gerd

Ansicht von 1 Antwort (von insgesamt 1)