.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 0.3 ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
opacity:0.2;
}
.box:hover {
cursor: pointer;
opacity:1;
}
I try to do a transition with opacity, it doesn't work, but it can work if I do the background change effect.