Search code examples
htmlcssfade

How do I fade only the div, not the text?

How do I only fade in/out the div, not the text inside the div?

Here's my code: 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;
}
Solution

  • By fading the div you will fade the text inside of it, because the text is part of the div. If you just want to fade the background color (the only other visible part of the div, other than the text), you can use alpha transparency.

    .fade {
  background-color: antiquewhite;
  width: 300px;
  height: 200px;
  text-align: center;
  transition: background-color .25s ease-in-out;
}

.fade:hover {
  background-color: rgba(250,235,215,0.5);
}
    <div class="fade">Hover over me.</div>