Contao 4: Template ce_image mit zusätzlichen DIV

[Schnippel]

Hi Leute,

Wie lässt sich das Template ce_image mit einem zusätzlichen DIV versehen?

Ziel ist ein leeres DIV vor der Überschrift:
Screen 1:
Unbenannt-2.png

Dazu habe ich das Template ce_image wie folgt abgeändert:
Screen 2:
Unbenannt-3.png

Das Ganze wird aber nicht angezeigt (siehe Screen 1)
Was muß da noch geändert werden?

Das leere DIV dient zur Gestaltung per CSS für einen Effekt

[Spooky]

Du hast dieses <div> außerhalb eines Blocks eingefügt, daher wird das auch nicht ausgegeben. Du solltest dich in das Template System von Contao einlesen, insbesondere die Vererbung. In deinem Fall sollte dein Template eher so aussehen:

<?php $this->extend('ce_image'); ?>

<?php $this->block('headline'); ?>
  <div class="effect"></div>
  <?= $this->parent() ?>
<?php $this->endblock(); ?>

Brauchst du dieses <div> überhaupt zwingend? Du kannst auch zB .ce_image:before verwenden...

[Schnippel]

Danke, mit dem DIV funtktioniert es

Brauchst du dieses <div> überhaupt zwingend? Du kannst auch zB .ce_image:before verwenden...

Damit bekomme ich diesen Effekt nicht hin :-/
Es geht um diesen Effekt hier (beim Hover orange Transparenz)

.effekt {
                        background: rgba(255, 105, 0, 0.6) none repeat scroll 0 0;
			bottom: 0;
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			right: 0;
			top: 0;
			width: 100%;
			z-index: 2;
	}

.effekt:hover {
			opacity:1;
}

Wie würde das mit :before funktionieren?

[Socki]

Hallo Schnippel.

So sollte es mit before funktionieren.

.deineKlasse:hover::before {
    content:"";
    background: rgba(255, 105, 0, 0.6) none repeat scroll 0 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    opacity: 0.5;
}

Gruß Socke

[Schnippel]

@Socki

Danke, funktioniert super :-)