Gradient over afbeelding in module

Hoe krijg ik een kleurverloopje over een afbeelding in een module?

Ik maakte een class voor de gradient (class elders getest, die klopt). Die staat in zowel template.css als in custom.css. Bovendien heb ik in JCE > Profiles > Plugin Params > Styles de class toegevoegd.

Maar het verloopje werkt niet op een afbeelding die in een module staat. Ik heb het geprobeerd door een afbeelding plat in de editor te plakken en door de afbeelding als background toe te voegen.

Werkt allemaal voor geen meter.
Wat zie ik over het hoofd of doe ik verkeerd?

Een echte oplossing kan ik geven als ik de code zie, maar om toch even kort door de bocht een antwoord te geven, het volgende: om items over elkaar te leggen moet je in lagen werken (ga ervanuit dat je dit nu niet doet.). In css moet je werken met z-index (alles boven 1 legt het item eroverheen) en position (relative of absolute). De gradient zou een tranparantie moete krijgen om het erover te laten vallen. Als je met deze waarden aan de gang gaat moet het lukken. Je mag natuurlijk altijd een link delen, zodat er iemand in de code kan meekijken. Of je legt een gradient over de afbeelding via paint of photoshop.

JCE doet niks, behalve dat je een 'class' kan toekennen aan tekst of items. Dus daar zit je probleem niet.

Anyway probeer eens zoiets:
jouwclass of jouwclass:hover {
background-color: #c95b74 ; //backup voor oude browsers
background: linear-gradient(to bottom,#c95b74 0%,#c95b74 36%,#923e51 64%,#752f3f 100%);
background-blend-mode: multiply;
}

En die afbeelding moet je waarschijnlijk als achtergrond in je item zetten. Dus werk met .li of zo.

Is beetje uitproberen maar kan met CSS. Is wel wat voor de gevorderde gebruiker/.

Heren dank tot zover.
Inmiddels ben ik sinds gisteren een flinke stap verder. Het lukt onder meer op de volgende manier, die erg lijkt op wat @gasoline voorstelt.

In het tekstveld: (dat ‘text’ hoeft er niet bij)

En in de css:
Met de kleuren, de percentages en de richting is uiteraard ruim te spelen.

Dit is een vrij simpele maar effectieve workaround.
Nadeel vind ik dat de afbeelding in de class is opgenomen. Daarmee is die class dus slechts in een enkel geval bruikbaar. Het liefst maak ik een class die toegepast kan worden op meerdere afbeeldingen, in afzonderlijke artikelen of modules. Daar ga ik nog wat mee stoeien.

Nu een betere oplossing gevonden. Op zich heel simpel, maar niet erg gebruiksvriendelijk, want kennis van html en css vereist.

Uitgangspunt is het beeld waarover een gradiënt moet komen. Plak dat beeld niet in de editor, maar voeg het onder ‘Opties’ toe als achtergrondafbeelding.
Vervolgens zet je als code in het editorveld: waarbij hoogte en breedte overeenkomen met die van de afbeelding.
In de editor-view is dus niks te zien.

De class ‘overlay’ geeft de eigenschappen van de gradiënt weer; die kun je gewoon in custom.css zetten.

Deze class is toepasbaar op meerdere artikelen of modules – alleen de in het editorveld te plaatsen html-code is afhankelijk van het gekozen beeld. En JCE kan er helemaal buiten blijven.
Opgelost, wat mij betreft.

Vervolgens zet je als code in het editorveld:

Code:

<div class="overlay" style="width: 1080px; height: 288px;"> </div>

<div class="overlay"></div>

Je kan ook .pageclass .overlay {
width:1080px;
height:288;
background:url(urlhiervanplaatje);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;}
in je css plaatsen, dan kan je ze individueel stylen/opmaken/sizen.

En je kan nog een div in een div doen, etc.