Is there a way to apply fade in/out effect only to the background of the div, without affecting the text inside?
You can view my code snippet here: https://jsfiddle.net/tc6fq235/3/
<div class="fade">Hover over me.</div>
.fade {
background-color: antiquewhite;
width: 300px;
height: 200px;
text-align: center;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}