If I understand you correct, you just want to transition the opacity property and not the background property which gives the roll down effect? To do this, we need to specify which property that should be transitioned.
In your case, you have specified that the transition effect should be applied to all
properties, which is both background-position: 0 47px;
and opacity: 1;
.
So, the only thing you need to do is change transition: all 0.5s;
to transition: opacity 0.5s;
.
Here's a DEMO
Hope that helps!