Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 transition not working
#
hey ! i'm trying to get one of my ids to have a smooth transition animation on hover but it's not wanting to work. any suggestions on how to get it to work ?

http://teatester17.jcink.net/index.php? it's the orange id for my forum rows
PM
#
from what i can tell from the inspect element is you didn't specify what is supposed to transition.

so right now your transition looks like this in the code:

CODE
transition: 0.5s linear;


when it should look something like this:

CODE
transition: all 0.5s linear;


it doesn't know what's supposed to transition, so it's not doing a transition, if that makes sense?
PM
#
no such luck :^(
PM
#
The background property isn't capable of transitions/animations. You could, theoretically, use a ::before element with a gradient background and transition its opacity on hover.. but also, why are you using a gradient if both colors are black?
PM
#
ah ok so what i'm trying to do is have the background blur on hover.

originally i was just going to use filter: blur(#px); but that blurred all of the content, not just the background. then i tried overlaying elements, so i would have one at the bottom that would blur on hover and the content i wanted visible would be placed on top (if that makes sense....) but that was a mess and didn't work either. then i figured i could just blur the background image in photoshop, have the new background appear on hover, and give the blurred result i'm looking for (kind of a roundabout way since the css was being so finicky).

that's where i'm at now, but since transitions don't apparently work on background properties i'm at a loss of how to make this work :^(

(also the gradient is just to tint the background image since i can't just use background-color paired with a background-image)
PM
#
I think the easiest way to do it would be to have two elements inside the forum container that are 100% width and height, set the background of one to the unfocused image, the other to the focused image, and then fade the unfocused image with an opacity transition.
PM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll