CODEWITHSUNDEEP
csshover
Rolando Niubó
Rolando Niubó

Reputation: 1215

Hover effect not working on positioned Anchor Tag <a>

When I position the element above an image Hover effect stop working. Any idea why? I'm learning.

I have some positioned elements, an overlay with opacity on top of a div with a background image in fixed position.

Code entire section and entire CSS :

HTML:

<div class="wrapper"> <!-- Global Wrapper -->
<section>
    <div class="first-row">
       <div class="first-row__overlay">
       </div>
        <div class="jumbotron">
            <h2 class="jumbotron__header">This is the Title</h2>
            <p class="jumbotron__text">Lorem text
            </p>
            <div class="under-line"></div>
        </div>
        <a href="#" class="my-Btn">START NOW</a>
    </div>
</section>

CSS:

* {
  margin: 0;
  padding: 0;
  font-family: 'Arsenal', sans-serif;
  }
.wrapper {
  margin: 0;
  padding: 0;
  }
.first-row {
  width: 100%;
  height: 100vh;
  background: url("../images/paradise-1.jpg") no-repeat fixed center center;
  background-size: cover;
  text-align: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: -100;
  }
.first-row__overlay {
  background-color: rgba(33, 46, 63, 1);
  width: 100%;
  height: 100vh;
  opacity: .35;
  position: relative;
  top: 0;
  left: 0;
  z-index: -99;
  }
.jumbotron { 
  width: 50%;
  margin: auto;
  color: white;
  position: relative;
  top: -70vh;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.3);
  }
.under-line {
  height: 10px;
  width: 0;
  margin: auto;
  background-color: transparent;
  border-bottom: 1px solid white;
  transition: 7s ease;
 }
.my-Btn {
 position: relative;
  top: -67vh;
  z-index: 99999999;
  color: #1d1e1f;
  font-weight: 300;
  font-size: 1.2em;
  padding: 10px 60px;
  background-color: #fdfdfe;
  border-radius: 30px;
  }
.my-Btn:hover {
  cursor: pointer;
  }

Upvotes: 1

Views: 1882

Answers (1)

cosmoonot
cosmoonot

Reputation: 2189

You had a z-index set to negative position, z-index: -100, remove that from .first-row class and it will resolve the issue. You need to keep an eye on the z-indexing, always think of the elements as a stack which lives on top of each other. 

.first-row {
      width: 100%;
      height: 100vh;
      background: url("../images/paradise-1.jpg") no-repeat fixed center center;
      background-size: cover;
      text-align: center;
      position: relative;
      top: 0;
      left: 0;
}

Upvotes: 1

Related Questions