CODEWITHSUNDEEP
htmlcss
Imalea
Imalea

Reputation: 376

Text over background image removes its hover state

I have this text on top of an image. When I hover on the text, the hover I created for the background image doesn't work. Would anyone have a solution for this?

JSfiddle: https://jsfiddle.net/marineboudeau/h177pdne/4/

<div class="card">
  <a href="#">
    <div class="background-container">
      <div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div>
    </div>
  </a>
  <a href="#" class="headline link--no-decor">
    <h2>Headline</h2>
  </a>
</div>

And the CSS:

.card {
  width: 300px;
  height: 200px;
}

a {
  text-decoration: none;
}

h2 {
  color: white;
  font-family: Helvetica, sans-serif;
}

h2:hover {
  color: yellow;
}

.headline {
  padding: 0 22px;
  position: relative;
  margin-top: -80px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.background-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.background-container:after {
  content: "gradient mask for image";
  overflow: hidden;
  position: absolute;
  text-indent: -9999rem;
  font-size: 0;
  line-height: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(20deg ,rgba(0,0,0,.8), rgba(0,0,0,0));
}

.background-container:hover:after {
  background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6));
  border: 2px solid red;
}

.background {
  height: 200px;
}

Thanks!

Upvotes: 0

Views: 47

Answers (2)

Nadir Laskar
Nadir Laskar

Reputation: 4160

Istead of setting hover on the .background-container:hover:after add hover on this .card:hover selector and select background-cointainer like this .card:hover a .background-container:after

This should work,

.card:hover a .background-container:after {
      background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6));
      border: 2px solid red;
}

Check out the full code

.card {
  width: 300px;
  height: 200px;
}
a {
  text-decoration: none;
}
h2 {
  color: white;
  font-family: Helvetica, sans-serif;
}
h2:hover {
  color: yellow;
}
.headline {
  padding: 0 22px;
  position: relative;
  margin-top: -80px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.background-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.background-container:after {
  content: "gradient mask for image";
  overflow: hidden;
  position: absolute;
  text-indent: -9999rem;
  font-size: 0;
  line-height: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(20deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}
.card:hover a .background-container:after {
  background: linear-gradient(20deg, rgba(255, 0, 0, .6), rgba(255, 255, 0, .6));
  border: 2px solid red;
}
.background {
  height: 200px;
}
<div class="card">
  <a href="#">
    <div class="background-container">
      <div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div>
    </div>
  </a>
  <a href="#" class="headline link--no-decor">
    <h2>Headline</h2>
  </a>
</div>

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 193248

Move <a href="#" class="headline link--no-decor"> into the backround element, so it won't block the hover event.

To prevent the .background-container:after from block the a.headline hover, we need to assign position: relative, and z-index: 1 to a.headline. 

.card {
  width: 300px;
  height: 200px;
}

a {
  text-decoration: none;
}

h2 {
  color: white;
  font-family: Helvetica, sans-serif;
}

h2:hover {
  color: yellow;
}

.headline {
  position: relative;
  z-index: 1;
  padding: 0 22px;
  position: relative;
  margin-top: -80px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.background-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.background-container:after {
  content: "gradient mask for image";
  overflow: hidden;
  position: absolute;
  text-indent: -9999rem;
  font-size: 0;
  line-height: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(20deg ,rgba(0,0,0,.8), rgba(0,0,0,0));
}

.background-container:hover:after {
  background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6));
  border: 2px solid red;
}

.background {
  height: 200px;
}
<div class="card">
  <a href="#">
    <div class="background-container">
      <div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div>
      <a href="#" class="headline link--no-decor">
        <h2>Headline</h2>
      </a>
    </div>
  </a>
</div>

Upvotes: 2

Related Questions