I DON'T KNOW CODING ; NEED HELP WITH THIS

P

ProGIG

Regular Member

Apr 12, 2019

377

42

• Aug 8, 2020

• #1

I wanna know how I can change images on hovering over them. I got this code from the web but it does not work properly, and I wanna add a fade effect too in the transition. Would appreciate if anyone can help with this. Thanks

Code:

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

 

magicjones

Power Member

Oct 10, 2018

608

367

• Aug 8, 2020

• #2

All I did was google your code, brought me to the stack overflow page where there's an easy example there. See the code in action: http://jsfiddle.net/ssuryar/wcmHu/429/

 

P

ProGIG

Regular Member

Apr 12, 2019

377

42

• Aug 8, 2020
• Thread Starter Thread Starter

• #3

magicjones said:

All I did was google your code, brought me to the stack overflow page where there's an easy example there. See the code in action: http://jsfiddle.net/ssuryar/wcmHu/429/

Click to expand...

Thanks for helping out. I think that will work but what if I wanna add a fade transition to it?

 

Alex Radcliffe

Registered Member

Aug 8, 2020

69

43

• Aug 8, 2020

• #4

ProGIG said:

Thanks for helping out. I think that will work but what if I wanna add a fade transition to it?

Click to expand...

Try adding

transition: 0.5s all;

 

P

ProGIG

Regular Member

Apr 12, 2019

377

42

• Aug 9, 2020
• Thread Starter Thread Starter

• #5

Alex Radcliffe said:

Try adding

transition: 0.5s all;

Click to expand...

Hey! Thanks for helping. I will try it out and let you know if I am able to make it work

 

slighty

Regular Member

Jul 31, 2017

258

140

• Aug 12, 2020

• #6

As alex said just do:

Code:

div {
    background: url('http://dummyimage.com/100x100/000/fff');
    transition: background 0.5s;
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Change the 0.5 accordingly to how many seconds you want the transition from one photo to the other to take effect