Transitions don't seem to work across all projects :/


#1

Hi all,

I've just completed the Shutterbug Project however it is unfinished in my opinion as i cannot get the box shadow transition to work in my code. Here is what the code looks like in developer view:

As you can see it is not a complex transition however it wont work no matter how specific i try and be. My only theory is that it is being overridden by something. Maybe bootstrap? Any help would be appreciated guys.

Here is my code:

.download {
    background-color: rgba(238,68,95,0.9);
    border-radius: 4px;
    color: #fff;
    padding: 8px 30px;
    transition: box-shadow 0.5s !important;
    -webkit-transition: box-shadow 0.5s !important;
}
.download:hover{
  color: #FFF;
  transition: box-shadow 0.5s !important;
}

Edit: Moving on to the next project and the transitions still don't work at all. Maybe Codecademy's browser is causing the issue. Seems to work in the normal browser.


#2

Hey Luke,

You're not quite doing transitions right :slight_smile:

Here's an example of how you should do it:

a {
  color: red;
  transition: color 0.3s; /* !important shouldn't be used for this */
  /* no need for -webkit-transition anymore */
}

a:hover {
  color: blue;
}

See? You're changing color's value from red to blue. You only need the transition once, in the base rule for the element.

So, with your code, instead of having another transition for the same thing defined in your .download:hover rule, you need to change box-shadow's value to something different than it is by default :slight_smile:


#3

Hey there,

Thanks for the reply.

I adjusted my code based on what I can understand from your reply. This is what it looks like now:


.download {
background-color: rgba(238,68,95,0.9);
border-radius: 4px;
color: #fff;
padding: 8px 30px;
transition: box-shadow 2s;

}
.download:hover{
color: #000;
box-shadow: 0 0 3px #FFF;
}

Unfortunately it still doesn't work. Could it be that the selected element is wrong? The .download selector is the one thats controlling the styling of the button. Thanks again!


#4

@designninja08693 That looks like it should work to me. Could you put your code in a Pen, so I can see it all?


#5

Try to add box-shadow: none; to the .download.

And make sure that it does not work. Change values to make it more visible:

box-shadow: 0 0 10px 40px #FFF;

#6

Thanks, that seems to work! Appreciate all the help guys! Now to practice that.


#7

You're very welcome :slight_smile:


#8

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.