Reputation: 376
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
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
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