0

I am trying to make a nice hover transition with a gradient background over an image. The problem is I can't get the transition to work on the gradient background. So I moved it behind the image instead of on top and set the opacity of the image on hover. However, now the H2 won't show up very well because it is a child of the image div.

https://jsfiddle.net/landon1013/b0L6yx25/2/

HTML

<div class="gradient">
  <div class="image">
    <h2>
      Jake Brown
    </h2>
  </div>
</div>

SCSS

.gradient {
  align-items: flex-end;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  background: linear-gradient(to right, rgba(195, 32, 52, 0.83) 0%, rgba(36, 11, 54, 0.83) 100%);
  width: 300px;
  height: 300px;

  .image {
    align-items: flex-end;
    background-image: url(https://huish.landoncall.com/wp-content/uploads/2019/03/emily-jacobsen.jpg);
    background-size: cover;
    display: flex;
    height: 100%;
    width: 100%;

    h2 {
      color: white;
      display: none;
      padding-left: 20px;
    }

    &:hover {
      opacity: 0.2;
      transition: opacity ease-in 0.7s;

      h2 {
        display: initial;
      }
    }
  }
}
Parzi
  • 694
  • 2
  • 10
  • 33
  • please consider all the anwser and not the accepted one. I know rgba will not solve your issue but other answer will do – Temani Afif Mar 16 '19 at 20:58
  • @TemaniAfif I fail to see how this is the same. A background color and a background image are two very different things. – Parzi Mar 16 '19 at 21:05
  • that's why I insist on reading all the answers ... example: https://stackoverflow.com/a/24496899/8620333 – Temani Afif Mar 16 '19 at 21:07
  • 1
    added more duplicate, all of them will show the same techniques, simply take the time to check different answer – Temani Afif Mar 16 '19 at 21:11

0 Answers0