<div class="wrap type1">
  <p>Only background</p>
  <p>Hello world</p>
</div>

<div class="wrap type2">
  <p>Only letters</p>
  <p>Hello world</p>
</div>

<div class="wrap type3">
  <p>Both</p>
  <p>Hello world</p>
</div>


.wrap {
  height: 100px;
  width: 100px;
  color: rgb(255, 0, 0);
  background-color: rgb(100, 100, 100);
}

/* Only background reflects opacity */
.type1:hover {
  background-color: rgba(100, 100, 100, 0.4);
}

/* Only letters reflect opacity */
.type2:hover {
  color: rgba(255, 0, 0, 0.4);
}

/* Both reflect opacity */
.type3:hover {
  opacity: 0.4;
}



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.