CODEWITHSUNDEEP
htmlcsshover
James
James

Reputation: 1706

CSS hover effect also when mouse pointer over other elements positions

I have a hover effect on div.overlay, so when hovered, it will fade out and back in. However, if I hover the <span> or <h2>, background does not change, and I'm struggling finding how to make anything hovered within the <a> to have the same effect. Any ideas?

.homepage-box {
  position: relative;
  width: 300px;
  height: 300px;
}
.homepage-box h2 {
  margin-bottom: 0;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 14%;
  color: #ffffff;
  font-size: 2em;
  z-index: 3;
}
.homepage-box span.button {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.3em;
  border: 1px solid #fff;
  padding: 7px 20px;
  font-weight: bold;
  margin: 0 30%;
  z-index: 3;
}
.homepage-box img {
  margin: 0 0 10px 0;
  z-index: 1;
}
.homepage-box div.over {
  position: absolute;
  height: 191px;
  width: 100%;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  -webkit-transition: background-color 500ms linear;
  -moz-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}
.homepage-box div.over:hover,
.homepage-box a:hover ~ div.over,
.homepage-box h2:hover ~ div.over {
  background: rgba(0, 0, 0, 0);
}
.homepage-box a {
  color: #2B2B2C;
  margin: 0 0 15px 0;
  display: block;
}
<div class="homepage-box">
  <a href="#">
    <div class="over"></div>
    <h2>Baby Bean Bags</h2>
    <span class="button">shop now</span>
    <img src="/images/companies/1/baby-beanbags.jpg">
    <p>Perfect for a newborn baby &amp; makes a lovely gift to new parents. Cute, safe &amp; well designed baby beanbags.</p>
  </a>
</div>

Upvotes: 0

Views: 190

Answers (1)

mani
mani

Reputation: 3096

contain the content within the overlay div

.homepage-box {
  position: relative;
  width: 300px;
  height: 300px;
}
.homepage-box h2 {
  margin-bottom: 0;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 14%;
  color: #ffffff;
  font-size: 2em;
  z-index: 3;
}
.homepage-box span.button {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.3em;
  border: 1px solid #fff;
  padding: 7px 20px;
  font-weight: bold;
  margin: 0 30%;
  z-index: 3;
}
.homepage-box img {
  margin: 0 0 10px 0;
  z-index: 1;
}
.homepage-box div.over {
  position: absolute;
  height: 191px;
  width: 100%;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  -webkit-transition: background-color 500ms linear;
  -moz-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}
.homepage-box div.over:hover,
.homepage-box a:hover ~ div.over,
.homepage-box h2:hover ~ div.over {
  background: rgba(0, 0, 0, 0);
}
.homepage-box a {
  color: #2B2B2C;
  margin: 0 0 15px 0;
  display: block;
}
<div class="homepage-box">
  <a href="#">
    <div class="over">
    <h2>Baby Bean Bags</h2>
    <span class="button">shop now</span>
    <img src="/images/companies/1/baby-beanbags.jpg">
    <p>Perfect for a newborn baby &amp; makes a lovely gift to new parents. Cute, safe &amp; well designed baby beanbags.</p>
    </div>
  </a>
</div>

Upvotes: 4

Related Questions