Fading in a background image using javascript or css on hover
Question
So far, i've been able to make it such that when the cursor hovers over the div a background image in the body appears. I need to add a fade in animation to this. Ive been looking for solutions here but havent been able to work around it. I don't have any experience in javascript.
enter code here
<script>
changeBgImage = () => {
document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";
console.log("working")
}
ogBgImage = () => {
document.body.style.backgroundImage = "url('../Images/Background/black.jpg')";
console.log("working")
}
</script>
<style>
body {
background-image: url('../Images/Background/black.jpg');
}
</style>
<body>
<div class="gwraith"><a href="../Legends/wraith.html ">
<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">
</a>
</body>
3 answers
solution1
1 ACCPTED 2020-11-19 06:08:50
Add a transition rule to the body tag. The same can be done in css, without javascript.
function changeBgImage() { document.body.style.backgroundImage = "url('https://s1.1zoom.ru/big0/284/Summer_Pond_Fence_Trees_496376.jpg')"; } function ogBgImage() { document.body.style.backgroundImage = "url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg')"; }
body { background-image: url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg'); background-repeat: no-repeat; background-size: cover; transition: all 0.7s linear; }
<body> <div class="gwraith"> <a href="../Legends/wraith.html"> <img src="https://begin-english.ru/img/word/refresh.jpg" width="130vw" class="wraith" onmouseover="changeBgImage();" onmouseout="ogBgImage();"> </a> </div> </body>
solution2
1 2020-11-19 06:34:43
I didn't manage to do it with body. But you can stretch the underlying div and change its opacity.
const appDiv = document.getElementById("app"); appDiv.addEventListener("mouseover", showBodyBackground); appDiv.addEventListener("mouseout", hideBodyBackground); function showBodyBackground() { document.getElementById("bg").classList.add("hidden"); } function hideBodyBackground() { document.getElementById("bg").classList.remove("hidden"); }
.visible { background: url('https://www.bouwendnederland.nl/media/6502/rijnhaven-impressie-602-x-402.jpg'); transition: opacity 1.5s linear; opacity: 1; } .hidden { opacity: 0; } .stretched { position: absolute; width: 100%; height: 100%; } #app { width: 100px; height:50px; background: lightblue; text-align: center; margin: 0 auto; position: relative; }
<body> <div class="stretched visible" id="bg"></div> <div id="app">Hover me!</div> </body>
Be aware, that everything will disappear in the element with opacity: 0. It means, your button and other elements you want to keep on the screen shouldn't be children of that div.
solution3
1 2020-11-19 09:31:12
We can't just fade body, or indeed any wrapper div which may replace it, as that would fade everything. We also can't directly fade a background image as CSS doesn't have that ability. But we can put the two background images into the two pseudo elements, before and after, of body and these can then be animated to fade in and out. The code wants to fade in one background on mouseover, and fade it out on mouseout.
There are two background images used, one called black. The code here fades that out as the other image fades in, but that can be easily removed if required.
Mouse over the gear image to fade in the second image, and mouseout of the gear to fade it out.
<!DOCTYPE html> <html> <head> <script> changeBgImage = () => { <!--document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";--> document.body.classList.toggle('showbefore'); document.body.classList.toggle('showafter'); console.log("working") } ogBgImage = () => { <!--document.body.style.backgroundImage = "url('christmas card 2020 front.jpg')";--> document.body.classList.toggle('showbefore'); document.body.classList.toggle('showafter'); console.log("working") } </script> <style> body { position: relative; height: 100vh; /* I added this just to cover the whole window you may not want it */ } body:before, body:after { opacity: 0; content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-size:cover; /* I added this just to get the background over the whole window - you may or may not want it */ background-repeat: no-repeat no-repeat; background-position: center center; animation-duration: 2s; /* change to what you want it to be */ animation-fill-mode: forwards; } body:before { background-image: linear-gradient(black, black); /*change this to url('your background image');*/ animation-name: shown; } body:after { background-image: url('https://ahweb.org.uk/christmas card 2020 front.jpg'); animation-name: unshown; } body.showbefore:before, body.showafter:after { animation-name: show; } body.showafter:before, body.showbefore:after { animation-name: unshow; } @keyframes unshown { from { opacity: 0; } to { opacity: 0; } } @keyframes shown { from { opacity: 1; } to { opacity: 1; } } @keyframes unshow { from { opacity: 1; } to { opacity: 0; } } @keyframes show { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body class="showbefore"> <div class="gwraith"><!--<a href="../Legends/wraith.html ">--> <!--<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith" onmouseover="changeBgImage();" onmouseout="ogBgImage();">--> <img src="https://ahweb.org.uk/gear.jpg" width="130vw" class="wraith" onmouseover="event.preventDefault();event.stopPropagation();changeBgImage();" onmouseout="event.preventDefault();event.stopPropagation();ogBgImage();"> <!--</a>--> </body> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.