Write
transition: opacity 0.3 ease-out;
Instead of
transition: background-color 0.3 ease-out;
Because on hover you are changing opacity
not background
.
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: opacity 0.3 ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
opacity:0.2;
}