HTML CSS

FADE BACKGROUND IMAGE WITH CSS HTML

<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 one as foreground, other as background.

HTML DIV STACKING

01

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; }

CSS FADE ON HOVER (A)

02

BACKGROUND IMAGE BELOW #back {   z-index: 1; background-size: cover;   background-image: url(IMG.JPG);   opacity: 1; }

HOVER TO FADE BACKGROUND #wrap:hover #back { opacity: 0.5; }

CSS FADE ON HOVER (B)

03