CODEWITHSUNDEEP
htmlcsshoveropacity
James Hamann
James Hamann

Reputation: 862

hover and changing the opacity of a div and an element

I am creating a box in html that contains a title, a background image, and a ghost div on top of it that appears on hover with a link.

The html looks like this:

<div class = "box-wrapper">
  <div class = "ghost-box">
    <a class = "link-button"></a>
  </div>
  <div class = "content-box">
    <h3 class = "title">Title</h3>
  </div>
</div>

And the CSS looks like this:

.box-wrapper {display:inline-block;}
.ghost-box {
  position:absolute;
  width: 300px;
  height: 100%;
  background-color: rgba(1, 81, 161, 0.9);
  opacity: 0;
  transition: all .3s ease;
}
.ghost-box:hover {opacity:1;}
.content-box {
  width: 300px;
  height: 180px;
  background-image:url('example.jpg');
}
.title {
  opacity:1;
  transition: all .3s ease;
}

My conundrum is, the hover transition on the ghost div works great, but I would also like to affect the "title" element as well. I don't want to decrease the opacity of the "content-box" because I want the background image to still show through the ghost div, but I want the title to change it's opacity to 0. I've tried several combinations of things from:

.content-box:hover:first-child {opacity:0;}

to:

.box-wrapper:hover:last-child {opcaity:0;}

but nothing seems to be working. Any advice? I hope I made things clear enough.

Upvotes: 1

Views: 4810

Answers (2)

Chinoto Vokro
Chinoto Vokro

Reputation: 978

Option 1: Set the background-image on .box-wrapper.
Option 2: Set opacity on the contents of .content-box using .content-box>*
Option 2: Wrap the contents of .content-box with another div (.content-box-fader?) that you apply the fade effect to.

Upvotes: 0

CKH4
CKH4

Reputation: 238

If you move the hover to the container element you can do this.

.box-wrapper:hover .ghost-box {
  opacity: 1
}
.box-wrapper:hover .title {
  opacity: 0
}

Or you can use the CSS general sibling selector. https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

Upvotes: 2

Related Questions