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,080 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 • 613 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,815 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,096 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,032 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 • 915 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 • 521 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
• 829 views

0 votes

1 answer

Can i learn back-end web development without having any knowledge on front end web development?

Hi Unfortunately no, you have to know the ...READ MORE

answered Apr 23, 2020 in Web Development by Chyanit
• 160 points • 2,883 views

0 votes

0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17, 2020 in Web Development by anonymous
• 37,520 points • 934 views

+1 vote

1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points
edited Jan 21, 2020 by Niroj • 1,144 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