Fading in a background image using javascript or css on hover

I have so far been able to make it so that a background image in the body appears when the pointer is over the div. This has to have an animation that fades in. I've been trying to find a way around this but haven't been successful. I don't have any javascript experience.

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>

Jun 30, 2022 in CSS by Edureka
• 13,620 points • 1,133 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):

Email me at this address if my answer is selected or commented on:

Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes

1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points • 650 views

0 votes

1 answer

Creating a Zoom Effect on an image on hover using CSS?

Try using the following code: <style> .zoom { ...READ MORE

answered Jun 17, 2022 in CSS by Edureka
• 12,690 points • 1,853 views

0 votes

0 answers

Using CSS for a fade-in effect on page load

Can a text paragraph fade in on ...READ MORE

Jul 29, 2022 in CSS by Edureka
• 13,620 points • 1,193 views

0 votes

1 answer

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use jQuery for this: jQuery('li').wrapInner('<span class="li_content" />'); & ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points • 1,075 views

0 votes

1 answer

Position a CSS background image x pixels from the right?

The attribute border can be used as ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points • 958 views

0 votes

0 answers

CSS: background image on background color

If this panel is chosen, a panel ...READ MORE

Jun 22, 2022 in CSS by Edureka
• 13,620 points • 567 views

0 votes

1 answer

UI redesign- Will changing the css affect the javascript?

Changing the CSS code shouldn't affect the ...READ MORE

answered Apr 28, 2023 in UI UX Design by vinayak
• 927 views

0 votes

0 answers

How to create custom pagination in JavaScript?

With the help of examples, can you ...READ MORE

Dec 19, 2024 in Java-Script by Ashutosh
• 12,620 points • 42 views

0 votes

0 answers

Do i need to close connection of mongodb?

With the help of programming, can you ...READ MORE

Dec 19, 2024 in PHP by Ashutosh
• 12,620 points • 39 views

0 votes

0 answers

How do I create a custom popover in React?

With the help of a coding example, ...READ MORE

Dec 19, 2024 in Node-js by Ashutosh
• 12,620 points • 43 views

Subscribe to our Newsletter, and get personalized recommendations.

REGISTER FOR FREE WEBINAR

Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP