CSS transition doesn't work

Question

section#lBox{
background-color: rgb(168, 0, 0);
border: 1px solid rgba(0,0,0,.15);
border-radius: 0px;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 4px rgba(0,0,0,0.2);
margin: 100px auto; /*aligns center*/
padding: 24px;
width: 500px;
opacity: 0.5; 

-webkit-transition: all 5s linear;
 transition: background-color 5s;
-moz-transition: all 5s linear;


}

section#lbox:hover {
/*background-color: rgba(168, 0, 0, 0.8);
box-shadow: 0px 0px 500px; */
opacity: 0.8; 
}

I have been trying to fix it for half an hour and can't seem to find why the transition isn't working. It is supposed to make the translucent box more opaque when the mouse cursor is over it.

Answer 1

Look at this:

section#lBox {

That has a capital letter B in lBox .

Then look at this:

section#lbox:hover {

This has a lowercase b in lbox .

Assuming your box has an id="lBox" , the hover opacity: 0.8 part will not work, as CSS is case-sensitive, and lbox and lBox are two different things.

So what you should do is just change this:

section#lbox:hover {

To this:

section#lBox:hover {

And it should work.