The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Adding a transition to table background change

View previous topic View next topic Go down

Solved Adding a transition to table background change

Post by Rupture on September 10th 2014, 8:37 am

Hello,

I would like to know if it's possible to add a transition to table background change, as in I have 1 image for tables, and 1 for when you hover over them, but I want it to smoothly change into the other image. 

These are the 2 codes I'm using: 

Background image from tables:
Code:  Select Content
Code:
li.row {background-image: url('URL IMAGE');}


Hover at tables:
Code:  Select Content
Code:
li.row:hover {
background: url('URL IMAGE');
background-position: center;
background-repeat: no-repeat;}


Last edited by {LGO}*CF*Oscar on September 10th 2014, 8:53 pm; edited 2 times in total

Rupture
Forumember

Male Posts : 325
Reputation : 6
Language : English, Español, Deutsch, Catalá
Location : Earth

http://raptorgaming.forumotion.com

Back to top Go down

Solved Re: Adding a transition to table background change

Post by Ange Tuteur on September 10th 2014, 5:20 pm

Hello,

The transition property is mainly to make smooth transitions for colors, positioning, opacity, etc.. When it comes to backgrounds / images the only transition you can make is with the background position and such. Once you change the image URL it instantly changes, because it cannot make a smooth transition between image A and image B.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Adding a transition to table background change

Post by Rupture on September 10th 2014, 6:52 pm

So it can't be like a slideshow? No way to do it?

Rupture
Forumember

Male Posts : 325
Reputation : 6
Language : English, Español, Deutsch, Catalá
Location : Earth

http://raptorgaming.forumotion.com

Back to top Go down

Solved Re: Adding a transition to table background change

Post by Ange Tuteur on September 10th 2014, 7:07 pm

You could do something like this :
Code:
li.row {
  background:url(http://i39.servimg.com/u/f39/18/21/41/30/66610.png) repeat 0 -25% / 100% #666;
  transition:650ms;
}

li.row:hover { background:url(http://i39.servimg.com/u/f39/18/21/41/30/ccc10.png) no-repeat 0 0 / 100% #666 }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Adding a transition to table background change

Post by Rupture on September 10th 2014, 8:52 pm

That's perfect! Just what I wanted!!! Thank you!!

Rupture
Forumember

Male Posts : 325
Reputation : 6
Language : English, Español, Deutsch, Catalá
Location : Earth

http://raptorgaming.forumotion.com

Back to top Go down

Solved Re: Adding a transition to table background change

Post by Ange Tuteur on September 10th 2014, 8:56 pm

You're welcome

Topic archived

Have a good day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum