title: Gradient and text over image
body: <p>I am working currently on my website and wanted to ask best solution for this situation.</p>
  
  <p>Biggest struggle is that I need to put gradient over <code>img</code> + text and arrow icon. </p>
  
  <p>I tried 2 different ways:</p>
  
  <ol>
  <li><p>I was able to put gradient over image using <code>:after</code>, but now I don't know how to put text over image and that left arrow to the right of image.</p></li>
  <li><p>I used <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> 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 <code>:after</code> solution.</p></li>
  </ol>
  
  <p>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!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="case-study-items"&gt;
    &lt;div class="cs-item"&gt;
      &lt;img src="https://www.upload.ee/image/7272952/case-studies-item.png" alt=""&gt;
      &lt;p class="solgu"&gt;Melb Lashes&lt;/p&gt;&lt;img src="https://www.upload.ee/image/7272954/left-arrow.png" /&gt;&lt;/p&gt;
      &lt;p class="cs-text"&gt;Case-study&lt;/p&gt;
    &lt;/div&gt;
    &lt;figure&gt;
      &lt;img src="https://www.upload.ee/image/7272952/case-studies-item.png" alt=""&gt;
      &lt;figcaption&gt;
        &lt;p&gt;Melb Lashes&lt;img src="https://www.upload.ee/image/7272954/left-arrow.png" /&gt;&lt;/p&gt;
        &lt;p class="cs-text"&gt;Case-study&lt;/p&gt;
      &lt;/figcaption&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/lV8ZD.jpg" alt="Case-study views"></p>