Fading in a background image using javascript or css on hover

0 votes

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 in CSS by Edureka
• 10,120 points
25 views

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

Your answer

Your name to display (optional):
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 in CSS by Edureka
• 9,540 points
38 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 in CSS by Edureka
• 9,540 points
48 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 in CSS by Edureka
• 10,120 points
15 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 in CSS by Edureka
• 9,540 points
48 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 in CSS by Edureka
• 9,540 points
32 views
0 votes
0 answers

CSS: background image on background color

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

Jun 22 in CSS by Edureka
• 10,120 points
25 views
0 votes
1 answer
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,500 points
408 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,740 points

edited Jan 21, 2020 by Niroj 408 views
+1 vote
1 answer

What are pseudo class in css??

Hey, The state of an element is controlled  by ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,740 points

edited Jan 21, 2020 by Niroj 301 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP