CODEWITHSUNDEEP
htmlcss
Will
Will

Reputation: 97

Why is my opacity declaration affecting other elements?

I have created these button images. I am trying to make it so that when the user hovers over the image, the img element opacity changes while the elements on top like the span and the h2 elements stay completely opaque(visible). I targeted the img element specifically on hover in my css to do just that but for some reason the opacity of all the elements change. Why is this happening? What am I doing wrong and how can I fix this? The code follows.

body {
  background-color: black;
}

.featured-list li {
  display: inline-block;
  margin-right: .8%;
}

.featured-list a {
  display: block;
}

.featured-list {
  text-align: center;
  padding: 0;
  margin: 0 auto;
}

a.feature-img img {
  width: 425px;
  border-radius: 5px;
}

a.feature-img {
  text-align: center;
}


.f-cta, .f-img-content h2 {
  font-family: 'Abel',Helvetica,Arial,Lucida,sans-serif;
  font-weight: 100;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.f-img-content h2 {
  color: #fff;
  top: 34%;
}

.f-cta {
  background: #fff;
  width: 50%;
  border-radius: 3px;
  padding: 7px;
  color: #000;
  top: 48%;
  font-size: 1.3em;
}

.f-img-content {
  position: relative;
  text-align: center;
  overflow: hidden;
}

a.feature-img:hover img {
  opacity: .6;
}
<ul class="featured-list">
      <li><a href="#" class="feature-img">
        <div class="f-img-content">
          <h2>Lorem Ipsum project title</h2>
          <span class="f-cta">View Project</span>
          <img src="https://i.imgur.com/EENJU66.gif">
        </div>   
      </a></li>
      <li><a href="#" class="feature-img">
      <img src="https://i.imgur.com/EENJU66.gif">
      </a></li>
      <li><a href="#" class="feature-img">
      <img src="https://i.imgur.com/EENJU66.gif">
      </a></li>
      <li><a href="#" class="feature-img">
      <img src="https://i.imgur.com/EENJU66.gif">
      </a></li>
    </ul>

Upvotes: 0

Views: 774

Answers (2)

Paulie_D
Paulie_D

Reputation: 114991

Looks like a z-index issue. Just add z-index:1 to the .cta and h2.

The opacity change is affecting the stacking order putting the semi-transparent image on top of the content. Adjusting the z-index of the content fixes the issue.

body {
  background-color: black;
}

.featured-list li {
  display: inline-block;
  margin-right: .8%;
}

.featured-list a {
  display: block;
}

.featured-list {
  text-align: center;
  padding: 0;
  margin: 0 auto;
}

a.feature-img img {
  width: 425px;
  border-radius: 5px;
}

a.feature-img {
  text-align: center;
}

.f-cta,
.f-img-content h2 {
  font-family: 'Abel', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 100;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
}

.f-img-content h2 {
  color: #fff;
  top: 34%;
}

.f-cta {
  background: #fff;
  width: 50%;
  border-radius: 3px;
  padding: 7px;
  color: #000;
  top: 48%;
  font-size: 1.3em;
}

.f-img-content {
  position: relative;
  text-align: center;
  overflow: hidden;
}

a.feature-img:hover img {
  opacity: .6;
}
<ul class="featured-list">
  <li>
    <a href="#" class="feature-img">
      <div class="f-img-content">
        <h2>Lorem Ipsum project title</h2>
        <span class="f-cta">View Project</span>
        <img src="https://i.imgur.com/EENJU66.gif">
      </div>
    </a>
  </li>
  <li>
    <a href="#" class="feature-img">
      <img src="https://i.imgur.com/EENJU66.gif">
    </a>
  </li>
  <li>
    <a href="#" class="feature-img">
      <img src="https://i.imgur.com/EENJU66.gif">
    </a>
  </li>
  <li>
    <a href="#" class="feature-img">
      <img src="https://i.imgur.com/EENJU66.gif">
    </a>
  </li>
</ul>

Upvotes: 2

Mahatmasamatman
Mahatmasamatman

Reputation: 1535

Change the ordering of your elements, so the image is first, and h2 and span after them. That will fix the problem.

  <img src="https://i.imgur.com/EENJU66.gif">
  <h2>Lorem Ipsum project title</h2>
  <span class="f-cta">View Project</span>

Upvotes: 2

Related Questions