Help with CSS and smokescreen fogscreen classes

[yangauthier]

Hi, I visited the HTML/CSS/JS examples section of the wiki. There's the example of a Remark presentation with Story's theme with apron & al. What I'd like to achieve is to have slide like in the Haikudeck app, i.e. a background picture with a title and a dark / light shaded semi-transparent background. I've seen this can be achieved in Remark with the smokescreen / fogscreen classes (as explained here). But I'm not a programmer and I can't get the CSS to work properly in my Remark presentation. Would there be someone here to help me ? Thanks !

Smokescreen effect :

Fogscreen effect :

[yangauthier]

As a complement to my request, here is the CSS I copied from the Adirondack css :

.remark-slide-content.smokescreen > h1,
.remark-slide-content img[src~=smokescreen] {
background-color: rgba(0, 0, 0, 0.7);
}
.remark-slide-content.smokescreen > h1,
.remark-slide-content.smokescreen > h2,
.remark-slide-content.smokescreen > h3 {
color: white;
text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8), 8px 8px 20px rgba(0, 0, 0, 0.9);
}
@media print {
.remark-slide-content.smokescreen {
-webkit-print-color-adjust: exact;
-webkit-filter: opacity(1);
}
}
.remark-slide-content.fogscreen > h1 {
background-color: rgba(255, 255, 255, 0.7);
}
.remark-slide-content.fogscreen > h1,
.remark-slide-content.fogscreen > h2,
.remark-slide-content.fogscreen > h3 {
color: black;
text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5), 8px 8px 20px rgba(0, 0, 0, 0.2);
}
@media print {
.remark-slide-content.fogscreen {
-webkit-print-color-adjust: exact;
-webkit-filter: opacity(1);
}
}
.remark-slide-content.fit-h1 h1 {
height: 1.25em;
overflow: hidden;

But here is what I get :