Overlap image on div and make half of it invisible - html

Question

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

Answer 1

There are loads of methods to do what you want if I understand right - (a screenshot would help, also if you are including "working code" include a JS fiddle or codepen link) then the example below has working overlap of your content div and the image.
<div class="screenshot search">
<div class="container container-fluid">
<div class="row">
<div class="wrap">
<div class="col-md-6 image-wrap">
<img class="img-responsive" src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="pencarian"/>
</div>
<div class="col-md-6 content">
<h3>search</h3>
<p>test</p>
</div>
</div>
</div>
</div>
</div>
.screenshot {
padding: 6em 0;
height: auto;
}
.wrap {
position:relative;
}
.screenshot img {
width: 400px;
max-width: 90%;
z-index: ;
position: absolute;
}
.image-wrap {
overflow:hidden;
position:relative;
height: 200px;
}
.content {
display:block;
background:white;
position:absolute;
top:0;
width:100%;
}
.search {
background-color: #fafafa;
}
Fiddle
Read about Z-index here