Hover Over Div (IMG) To Reveal Text

1

I need to allow the user to hover over an image which then fades out, using opacity: 0, revealing text with two buttons. But I can’t seem to do this. Here is the code:

        <div class="projects__container">
          <div class="projects__tile">
            <img class="projects__card projects__card-tribute" src="/img/tributePage.jpg"/>
            <div class="projects__tile-info">
              <h5 class="heading-projects-lev h5">Tribute Page</h5>
              <p class="heading-projects-sub-lev h6">HTML5/CSS3</p>
              <button class="projects__btn" type="button" href="https://shaurya-sarma.github.io/FCC-Tribute-Page/">View Demo</button>
              <button class="projects__btn" type="button"  href="">View Code</button>
            </div>
          </div>
          <div class="projects__tile ">
            <img class="projects__card projects__card-tribute" src="/img/landingPage.jpg"/>
            <div class="projects__tile-info">
              <h5 class="heading-projects-lev h5">Landing Page</h5>
              <p class="heading-projects-sub-lev h6">HTML5/CSS3</p>
              <button class="projects__btn" type="button">View Demo</button>
              <button class="projects__btn" type="button">View Code</button>
            </div>
          </div>
          <div class="projects__tile" >
            <img class="projects__card projects__card-tribute" src="/img/technicalDoc.png"/>
            <div class="projects__tile-info">
              <h5 class="heading-projects-lev h5">Django Documentation</h5>
              <p class="heading-projects-sub-lev h6">HTML5/CSS3</p>
              <button class="projects__btn" type="button">View Demo</button>
              <button class="projects__btn" type="button">View Code</button>
            </div>
          </div>
          <div class="projects__tile ">
            <img class="projects__card projects__card-tribute" src="/img/surveyForm.jpg"/>
            <div class="projects__tile-info">
              <h5 class="heading-projects-lev h5">Survey Form</h5>
              <p class="heading-projects-sub-lev h6">HTML5/CSS3</p>
              <button class="projects__btn" type="button">View Demo</button>
              <button class="projects__btn" type="button">View Code</button>
            </div>
          </div>
        </div>

.projects {
  &__container {
    margin: 5rem 20rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
  }
  &__tile {
    width: 310px;
    height: 310px;
  }
  &__tile-info {
    position: relative;
    text-align: center;
    opacity: 0;
    z-index: 5;
  }

  &__card {
    width: inherit;
    height: inherit;
    position: absolute;
    transition: 0.5s ease;
    &:hover {
      opacity: 0;
    }

    &-tribute {
      background-image: url("/img/tributePage.jpg");
    }
    &-documentation {
      background-image: url("/img/technicalDoc.png");
    }
    &-landing {
      background-image: url("/img/landingPage.jpg");
    }
    &-survey {
      background-image: url("/img/surveyForm.jpg");
    }
  }

  &__btn {
    border: solid colors(col-primary-blue) 0.2rem;
    background: none;
    color: colors(col-light-black);
    padding: 0.8rem;
    font-family: fonts(font-heading);
    font-size: 1.8rem;
    font-weight: 500;
    width: 20rem;
    display: block;
    margin: 3rem auto;
    transition: 0.4s ease-in;
    &:hover {
      cursor: pointer;
      box-shadow: inset 20rem 0 0 0 colors(col-dark-blue);
      border-color: colors(col-dark-blue);
      color: colors(col-white);
    }
    &:active {
      transition: 0s;
      border-color: colors(col-white);
    }
  }
}
2

You can find an example on this website, in the Portfolio section.

4

You can move the hover selector to .projects__tile and select the .projects__card and .projects__tile-info to set the opacity as needed.

5

Which div and img exactly are you trying to work with?

6

You can create a div setting it’s position to relative then place the img and buttons into the div. Set the position of the buttons to absolute and move to the desired position. Give the buttons opacity of 0 (make sure you style them first before removing the opacity so you can see what you’re styling). Then in your dive hover, select what happens to your img and then your buttons i.e.
.div:hover img {
Opacity: 0.2;
}
.div:hover btns {
Opacity: 1;
}