HTML CSS
(a quick example)
<div id="wrap"> <div id="top">FOO BAR</div> <div id="back"></div> </div>
* CSS does not have background-image-opacity property.
* SO WE STACK 2 <DIV>, USE AS FOREGROUND & BACKGROUND.
STACK <DIV> ON TOP OF EACH OTHER #wrap { display: grid; width: 100%; height: 100px; } #wrap > * { grid-column: 1 / 1; grid-row: 1 / 1; }
CONTENTS ON TOP #top { z-index: 2; padding: 10px; }
BACKGROUND IMAGE BELOW #back { z-index: 1; background: url(IMG.JPG); background-size: cover; opacity: 1; }
HOVER TO FADE BACKGROUND #wrap:hover #back { opacity: 0.5; }