CODEWITHSUNDEEP
htmlcssopacity
user1787531
user1787531

Reputation: 819

Increase transparent background opacity on hover?

I'd like for the my background image to increase from .1 opacity to .5 opacity when a user hovers over my div.

HTML

<div id="list">
    <div class="line_one">om nom nom nom...</div>
    <div class="line_two">18 foods to make you incredibly hungry</div>
</div>

CSS 

#list {
  display:block;
  position: relative; 
  -webkit-transition: all 1s ease; 
  -moz-transition: all 1s ease; 
  -o-transition: all 1s ease; 
  -ms-transition: all 1s ease; 
  transition: all 1s ease;
}

#list::after {
  content: "";
  background: url('test.jpg');
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

There must be a way to do this without Javascript. Any ideas?

Upvotes: 3

Views: 17615

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

Of course there is.

#list::after {
    transition: opacity 1s ease;
}
#list:hover::after {
    opacity: 0.5;
}

Upvotes: 10

Related Questions