How to fade background images

Question

UPDATE:THIS WORKS ON CHROME, HOW CAN I GET THIS TO WORK ON FIREFOX

I am trying to fade consecutive background images when I hover over a specific element. For example, if I have three text elements, and if I hover over one, I would like the background image to change with a transitional effect.

Here is my codepen: https://codepen.io/tmocodes/pen/MWwXxZO?editors=0110
Here is my inspiration source: https://www.awwwards.com/inspiration/fullscreen-menu-66nord

 let seattleEl = document.querySelector("#Seattle"); let ecuadorEl = document.querySelector("#Ecuador"); let arizonaEl = document.querySelector("#Arizona"); let imgArea = document.querySelector(".container"); ecuadorEl.addEventListener("mouseover", e => { imgArea.style.background = "url('https://www.telegraph.co.uk/content/dam/Travel/2019/November/ecuador.jpg')"; imgArea.classList.add = 'bg' }); seattleEl.addEventListener("mouseover", e => { imgArea.style.background = "url('https://cdn.vox-cdn.com/thumbor/avHeJenMsyJoJ3WBGHl24QWnybk=/0x0:7360x4912/1200x675/filters:focal(3092x1868:4268x3044)/cdn.vox-cdn.com/uploads/chorus_image/image/66498601/shutterstock_482690140.0.jpg')"; imgArea.classList.add = 'bg' });

 *{ padding:0; margin:0; box-sizing:border-box } .container{ background: url("https://www.telegraph.co.uk/content/dam/Travel/2019/November/ecuador.jpg"); background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; height:100vh; transition: all .3s; h1{ color:white; opacity: .6; font-family: Helvetica; font-size: 48px; padding: 10px; cursor:pointer; display:block; width:min-content; height:min-content; margin-bottom:10px; &:hover{ opacity:1; } } } @keyframes transition { from { opacity:0 } to { opacity:1 } } .bg{ background-color: black; z-index:10; animation: transition .3s !important; transition: all .2s; }

 <div class="container"> <h1 id="Ecuador">Ecuador</h1> <h1 id="Seattle">Seattle</h1> <h1 id="Arizona">Arizona</h1> </div>

Answer 1

Maybe this will help?

 //<![CDATA[ /* js/external.js */ let get, post, doc, html, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, inArray, isNum, isInt; // for use on other loads addEventListener('load', ()=>{ get = (url, success)=>{ const x = new XMLHttpRequest; x.open('GET', url); x.onload = ()=>{ if(success)success(JSON.parse(x.responseText)); } x.send(); return x; } post = (url, send, success)=>{ const x = new XMLHttpRequest; x.open('POST', url); x.onload = ()=>{ if(success)success(JSON.parse(x.responseText)); } if(typeof send === 'object' && send && !(send instanceof Array)){ if(typeof FormData !== 'undefined' && send instanceof FormData){ x.send(send); } else{ let s, r = []; for(let p in send){ s = send[p]; if(typeof s === 'object')s = JSON.stringify(s); r.push(encodeURIComponent(p)+'='+encodeURIComponent(s)); } x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); x.send(r.join('&')); } } else{ throw new Error('send argument must be an Object'); } return x; } doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id); mobile = nav.userAgent.match(/Mobi/i) ? true : false; S = (selector, within)=>{ const w = within || doc; return w.querySelector(selector); } Q = (selector, within)=>{ const w = within || doc; return w.querySelectorAll(selector); } hC = (element, className)=>{ return element.classList.contains(className); } aC = (element, className, func)=>{ element.classList.add(className.trim()); if(func)func(element); return (className, func)=>{ return aC(element, className, func); } } rC = (element, className, func)=>{ element.classList.remove(className.trim()); if(func)func(element); return (className, func)=>{ return rC(element, className, func); } } tC = (element, className, yFunc, nFunc)=>{ const c = element.classList, n = className.trim(); if(c.contains(n)){ c.remove(n); if(nFunc)nFunc(element); } else{ c.add(n); if(yFunc)yFunc(element); } return (className, yFunc, nFunc)=>{ return tC(element, className, yFunc, nFunc); } } inArray = (mixed, array)=>{ if(array.indexOf(mixed) === -1){ return false; } return true; } isNum = mixed=>typeof mixed === 'number' && !isNaN(mixed); isInt = mixed=>Number.isInteger(mixed); // put below on another page using a load Event - except the end load line and below function FadeMaker(faderElement, placesElement){ const places = []; let place; this.addPlace = (name, background)=>{ const h = M('h1'), d = M('div'); aC(d, 'fadeOut'); d.style.backgroundImage = 'url("'+background+'")'; h.textContent = name; h.onmouseenter = ()=>{ rC(place, 'fadeIn'); aC(place, 'fadeOut'); rC(d, 'fadeOut'); aC(d, 'fadeIn'); place = d; } placesElement.appendChild(h); faderElement.appendChild(d); places.push([h, d]); return this; } this.make = ()=>{ place = places[0][1]; rC(place, 'fadeOut'); places.forEach(a=>{ aC(a[1], 'fade'); }); return this; } } const fm = new FadeMaker(I('fader'), I('places')); fm.addPlace('Equador', 'https://www.telegraph.co.uk/content/dam/Travel/2019/November/ecuador.jpg').addPlace('Seattle', 'https://cdn.vox-cdn.com/thumbor/avHeJenMsyJoJ3WBGHl24QWnybk=/0x0:7360x4912/1200x675/filters:focal(3092x1868:4268x3044)/cdn.vox-cdn.com/uploads/chorus_image/image/66498601/shutterstock_482690140.0.jpg').addPlace('Arizona', 'https://azgovernor.gov/sites/default/files/styles/panopoly_image_original/public/6871930-arizona.jpg?itok=sbFgZG8r').make(); }); // end load //]]>

 /* css/external.css */ *{ box-sizing:border-box; padding:0; margin:0; } html,body,.container,#fader,.fade{ width:100%; height:100%; } .container{ position:relative; } .container>div,.fade{ position:absolute; } .fade{ background-position:center; background-size:cover; transition:opacity 0.5s ease-in-out; } .hide{ display:none; } #places>h1{ cursor:pointer; color:#fff; font:bold 48px Helvetica; padding:10px 20px 10px; } .fadeOut{ opacity:0; } .fadeIn{ opacity:1; }

 <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' /> <title>Title Here</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head> <body> <div class='container'> <div id='fader'></div> <div id='places'></div> </div> </body> </html>

You can ignore most of the JavaScript above FadeMaker ... but use that stuff all the time in the future. Notice that FadeMaker takes two arguments. One where all the fader Elements go and one where the name Elements go. Once you create a new instance, you just fadeMakerInstance.addPlace(yourNameHere, yourURLHere) , then .make() when your done. Note that you don't have to chain the methods like I show in the example. Once you have the instance variable you can just execute right off that like fm.addPlace(nameOne, urlOne); fm.addPlace(nameTwo, urlTwo); fm.make() fm.addPlace(nameOne, urlOne); fm.addPlace(nameTwo, urlTwo); fm.make() fm.addPlace(nameOne, urlOne); fm.addPlace(nameTwo, urlTwo); fm.make() .