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; } } } }
Improve this question
4
  • please consider all the anwser and not the accepted one. I know rgba will not solve your issue but other answer will do Commented Mar 16, 2019 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. Commented Mar 16, 2019 at 21:05
  • that's why I insist on reading all the answers ... example: stackoverflow.com/a/24496899/8620333 Commented Mar 16, 2019 at 21:07
  • 1
    added more duplicate, all of them will show the same techniques, simply take the time to check different answer Commented Mar 16, 2019 at 21:11
Load 5 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.