Gradient and text over image

Question

I am working currently on my website and wanted to ask best solution for this situation.

Biggest struggle is that I need to put gradient over img + text and arrow icon.

I tried 2 different ways:

1. I was able to put gradient over image using :after, but now I don't know how to put text over image and that left arrow to the right of image.

2. I used <figure> and <figcaption> I think this solution isn't the best, using negative margins to put text over image. But on this case I am not able to use :after solution.

I included photo — there you can see how it should look like. Also I am starting my coding career and if you notice bad practises please let me know!

figure {
  display: inline-block;
  margin: 15px 12px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

figcaption {
  margin-top: -80px;
}

figcaption p {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 44px;
  text-align: left;
  color: #ffffff;
  font-family: "Proxima Nova";
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
}

.cs-text {
  margin-top: -10px;
  color: #b9b8b8;
  font-family: "Proxima Nova";
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

figcaption img {
  position: relative;
  float: right;
  padding: 10px 35px 50px 0px;
}

.cs-item {
  position: relative;
  display: inline-block;
  max-width: 430px;
  max-height: 254px;
}

.cs-item:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.11) 36%, rgba(0, 0, 0, 0) 46%);
}

<div class="case-study-items">
  <div class="cs-item">
    <img src="https://www.upload.ee/image/7272952/case-studies-item.png" alt="">
    <p class="solgu">Melb Lashes</p><img src="https://www.upload.ee/image/7272954/left-arrow.png" /></p>
    <p class="cs-text">Case-study</p>
  </div>
  <figure>
    <img src="https://www.upload.ee/image/7272952/case-studies-item.png" alt="">
    <figcaption>
      <p>Melb Lashes<img src="https://www.upload.ee/image/7272954/left-arrow.png" /></p>
      <p class="cs-text">Case-study</p>
    </figcaption>
</div>

Answer 1

You can try to assign cs-item class to Figure, and set figcaption with z-index:1 and position: relative

figure {
  display: inline-block;
  margin: 15px 12px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

figcaption {
  margin-top: -80px;
  position:relative;
  z-index:2;
}

figcaption p {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 44px;
  text-align: left;
  color: #ffffff;
  font-family: "Proxima Nova";
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
}

.cs-text {
  margin-top: -10px;
  color: #b9b8b8;
  font-family: "Proxima Nova";
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

figcaption img {
  position: relative;
  float: right;
  padding: 10px 35px 50px 0px;
}

.cs-item {
  position: relative;
  display: inline-block;
  max-width: 430px;
  max-height: 254px;
}

.cs-item:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.11) 36%, rgba(0, 0, 0, 0) 46%);
}

 
  <figure class="cs-item">

    <img src="https://www.upload.ee/image/7272952/case-studies-item.png" alt="">
    <figcaption>
      <p>Melb Lashes<img src="https://www.upload.ee/image/7272954/left-arrow.png" /></p>
      <p class="cs-text">Case-study</p>
    </figcaption>
 </figure>

Answer 2

Welcome to StackOverflow. Be sure to search the site for answers, prior to asking a question. The question is actually two questions, and has been answered in other posts.

For gradients over images, see here.

By structuring the HTML properly, and simplifying the CSS, the texts and arrow image can float over the image and gradient, by being nested within the parent element that has the image and the gradient.

<div class="case-study-items">
  <div class="cs-item"> <!-- image and gradient here -->
    <p class="cs-title">Melb Lashes <span class="cs-left-arrow"></span></p>
    <p class="cs-text">Case-study</p>
  </div>
</div>

I've created a Codepen example to demonstrate.