title: Overlap image on div and make half of it invisible
body: <p>I want to make the image <code>70% visible</code> stick with the <code>bottom</code> and the rest of it <code>invisible</code> behind the div. I follow the tutorial with <code>z-index 10</code> <code>position absolute</code> and <code>overflow:hidden</code>. but the image still show and overlap on other div. Could you help me? thanks!</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="screenshot search"&gt;
    &lt;div class="container container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
          &lt;img class="img-responsive" src="./img/sc-search@2.jpg" alt="pencarian"/&gt;
        &lt;/div&gt;
        &lt;div class="col-md-6"&gt;
          &lt;h3&gt;
            search
          &lt;/h3&gt;
          &lt;p&gt;
            test
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>        .screenshot {
        padding: 6em 0;
        height: auto;
      }
  
  .screenshot img {
    width: 400px;
    max-width: 90%;
    z-index: 10;
    position: relative;
    overflow: hidden;
  }
  
  .search {
    background-color: #fafafa;
  }
  </code></pre>