Opacity: So machst du deine Bilder mit CSS transparent

In bestimmten Situationen macht es durchaus Sinn die eingebundenen Bilder oder Grafiken transparent zu machen. Vor allem dann, wenn diese Grafiken lediglich zum Design gehören und nicht von wichtigen Call to Actions ablenken sollen. In diesem Short-Tutorial erkläre ich dir, wie du deine Bilder im FunnelBuilder von FunnelCockpit ganz einfach mittels der CSS Eigenschaft "Opacity" stufenweise transparent machen kannst. Tipp: Dieser Code funktioniert auch für andere Elemente im Hover FunnelBuilder.

CSS TUTORIAL

Mit Opacity CSS Eigenschaft Bilder transparent machen

Um dein gewünschtes Element wie beispielsweise ein Bilder oder eine Grafik mit einem CSS Code transparent zu machen, musst du lediglich die CSS Eigenschaft "Opacity" implementieren und einen Wert zwischen 0 - 1 zur Einstellung der Sichtbarkeit definieren. Bei einem Bild-Element musst du im FunnelBuilder von FunnelCockpit einfach auf die Element-Einstellungen gehen und unten den Tab "CSS" auswählen. Unter "Bild CSS" kannst du nun den unten stehenden Code einfügen. 0 wäre in diesem Fall vollständig transparent, sodass das jeweilige Bild oder Element gar nicht mehr sichtbar ist.

Du kannst die Sichtbarkeit/Transparenz in Stufen einstellen. 0.1 ergibt eine Sichtbarkeit von 10%, 0.2 von 20%, 0.5 von 50% und so weiter. Solltest du dein Bild wieder zu 100% sichtbar haben wollen, wählst du als Wert 1 oder lässt die CSS Eigenschaft Opacity einfach gänzlich weg.

Hier findest du einige Beispiele einer Grafik die unterschiedliche Opacity-Einstellungen aufweisen. Es handelt sich bei allen Grafiken um die gleiche Quelldatei. Das erste hat keine Transparenz, das zweite hat einen Wert von 0.5 und das dritte einen Wert von 0.1.

 

   

 

CSS Code für Opacity (Transparenz):

opacity:0.5;

Klicke auf den Code, um ihn in die Zwischenablage zu kopieren.

Wofür kann man den Opacity CSS Code verwenden?

Es gibt unterschiedliche Gründe diese CSS Eigenschaft zu verwenden. Entweder du möchtest dein Design durch eine leichte Transparenz verschönern, ohne die Quelldatei in einer Bearbeitungssoftware editieren zu müssen oder du möchtest gewisse Bereiche deiner Webseite transparenter gestalten, um deine Conversion zu steigern. Denn Grafiken die eine 100%ige Sichtbarkeit haben und eventuell auch auffallende Farben beinhalten lenken häufig von wichtigen CTA-Buttons ab.