CODEWITHSUNDEEP
htmlcss
Waterfall
Waterfall

Reputation: 704

Hover effect setting text opacity as well

I am trying to hide text and when you hover over an item the opacity goes to 0.5 and the text appears. However, what seems to be happening is that the text is also getting set to opacity 0.5.

I am using react if you are wondering about the syntax.

<div
    className="course_grid-item"
    style={{ backgroundImage: `url(${bgImg4})` }}
>
    <div className="grid_course-name">
        <h5>Title</h5>
    </div>
</div>

.course_grid-item {
    transition: all 0.3s ease;
    background: white;
    padding: 2rem;
    margin: 5px;
    border-radius: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.course_grid-item:hover {
    opacity: 0.5;
}

.grid_course-name {
    opacity: 0;
}

.course_grid-item:hover .grid_course-name {
    opacity: 1;
    transition: all 0.3s;
}

Upvotes: 1

Views: 312

Answers (1)

Dan Knights
Dan Knights

Reputation: 8368

It's because course_grid-item is parent to grid_course-name.

Any filter applied on the parent affects the child:

.course_grid-item {
  transition: all 0.3s ease;
  background: url("https://cdn.static-economist.com/sites/default/files/images/print-edition/20170722_STP001_0.jpg");
  padding: 2rem;
  margin: 5px;
  border-radius: 5px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.course_grid-item:hover {
  opacity: 0.5;
}

.grid_course-name {
  opacity: 0;
}

.course_grid-item:hover .grid_course-name {
  opacity: 1;
  transition: all 0.3s;
}
<div class="course_grid-item">
  <div class="grid_course-name">
    <h5>Title</h5>
  </div>
</div>

You could set the background image to ::before instead:

.course_grid-item {
  position: relative;
  background: white;
  height: 200px;
  width: calc(100vw - 6rem);
  padding: 2rem;
  margin: 5px auto;
  border-radius: 5px;
  overflow: hidden;
}

.course_grid-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://cdn.static-economist.com/sites/default/files/images/print-edition/20170722_STP001_0.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
}

.course_grid-item:hover::before {
  opacity: 0.5;
}

.grid_course-name {
  position: relative;
  opacity: 0;
}

.course_grid-item:hover .grid_course-name {
  opacity: 1;
  transition: all 0.3s;
}
<div class="course_grid-item">
  <div class="grid_course-name">
    <h5>Title</h5>
  </div>
</div>

Or, have the image separate:

.course_grid-item {
  position: relative;
  width: calc(100vw - (4rem + 10px));
  margin: 4px auto;
}

.grid_course-background {
  position: absolute;
  width: 100%;
  height: 200px;
  transition: all 0.3s ease;
  background: url("https://cdn.static-economist.com/sites/default/files/images/print-edition/20170722_STP001_0.jpg");
  border-radius: 5px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.course_grid-item:hover .grid_course-background {
  opacity: 0.5;
}

.grid_course-name {
  position: relative;
  opacity: 0;
}

.course_grid-item:hover .grid_course-name {
  opacity: 1;
  transition: all 0.3s;
}
<div class="course_grid-item">
  <div class="grid_course-background"></div>
  <div class="grid_course-name">
    <h5>Title</h5>
  </div>
</div>

Upvotes: 1

Related Questions