JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<footer class="w-section__footer">

  <h2 class="wl-bg-collectif">COLLECTIF</h2>
  <h2 class="wl-bg-prive text_1k0">PRIVÉ</h2>
  <h2 class="wl-bg-live text_1k0">LIVE ONLINE</h2>
  
</footer>

CSS

h2:hover,
h2:focus,
h2:active {
color: #F24908!important;
}

footer {
background-repeat: no-repeat;
background-position: right top!important;
background-size: 50%!important;
z-index: -1;
}

JavaScript

document.getElementsByClassName('wl-bg-collectif')[0].setAttribute('data-bg-url', 'https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636e7ce48b2d53000d9af524'),

document.getElementsByClassName('wl-bg-prive')[0].setAttribute('data-bg-url', 'https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636e7ce26da50f000c512a26'),

document.getElementsByClassName('wl-bg-live')[0].setAttribute('data-bg-url', 'https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636f04c51f4f1b000d196c8c'),


[[ 'collectif', 'https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636e7ce48b2d53000d9af524' ], 
[ 'prive', 'https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636e7ce26da50f000c512a26' ], 
[ 'live', 'https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636f04c51f4f1b000d196c8c' ]].forEach(([ className, url ]) => document.querySelector(.wl-bg-${ className }).dataset.bgUrl = url),

window.onload = () => Array.from( document.getElementsByClassName('w-section__footer') ).forEach(div => Array.from( div.children ).forEach(e => {
 e.onmouseover  = () => div.style.backgroundImage = 'url(${ e.dataset.bgUrl })'
 e.onmouseleave = () => div.style.backgroundImage = ''
 })
)