Cutting the top part of an image with overflow or clip - html

Question

I am trying to cut the top part of an image using css. But using overflow:hidden it automatically starts hiding it from the bottom to top, while I want to keep the bottom part but cut off the top. I see there are only x and y options for overflow.
So I tried it using clip, but this can only be applied when the position is set to absolute or fixed, which breaks my responsiveness (and site overall).
This is how one image looks:
And this is how I want it to look:
This is my html markup of one product tile:
<div class="col-md-3 col-lg-3 mb-80 mb-xs-40">
<div class="post-prev-img">
<a href="listing/product"><img src="cms/images/website/producten/categorien/product.jpg" alt="">
</a>
</div>
<div class="post-prev-title font-alt align-center">
product
</div>
<div class="post-prev-text align-center"></div>
<div class="post-prev-more align-center">
<i class="fa fa-info-circle"></i> Bekijk categorie
</div>
</div>
Is there an easy way to achieve this? I am not looking for big javascript methods, it would be great if this could be done with a couple of lines of css.

Answer 1

.post-prev-imgbefore img {
border: solid 1px red; /* TO SEE RESULT... */
}
.post-prev-img {
overflow: hidden;
}
.post-prev-img img {
border: solid 1px red; /* TO SEE RESULT... */
}
.post-prev-img a {
height: 120px; /* Your height... */
position: relative;
overflow: hidden;
display: block;
}
.post-prev-img a img {
position: absolute;
bottom: 0;
}
<h1>BEFORE:</h1>
<div class="col-md-3 col-lg-3 mb-80 mb-xs-40">
<div class="post-prev-imgbefore">
<a href="listing/product"><img src="https://embed.gyazo.com/eb965662ca8fabb1de523e61c16cfe83.png" alt="">
</a>
</div>
<div class="post-prev-title font-alt align-center">
product
</div>
<div class="post-prev-text align-center"></div>
<div class="post-prev-more align-center">
<i class="fa fa-info-circle"></i> Bekijk categorie
</div>
</div>
<h1>AFTER:</h1>
<div class="col-md-3 col-lg-3 mb-80 mb-xs-40">
<div class="post-prev-img">
<a href="listing/product"><img src="https://embed.gyazo.com/eb965662ca8fabb1de523e61c16cfe83.png" alt="">
</a>
</div>
<div class="post-prev-title font-alt align-center">
product
</div>
<div class="post-prev-text align-center"></div>
<div class="post-prev-more align-center">
<i class="fa fa-info-circle"></i> Bekijk categorie
</div>
</div>

Answer 2

you can still use overflow: hidden , make the image, position: absolute and set bottom: 0, this way the top will overflow but will be hidden. remember for absolute the parent should be position: relative.
so
.image_container {
overflow: hidden;
position: relative;
}
.image {
bottom: 0;
positon: relative
}

Answer 3

You could try another approach
Firstly you set a div with a defined measures and a
.myDiv{
width:50%;
height:300px;
background-image:url('url_here');
}
And this way you can play with the background properties as background-size. I am not sure if this could solve your problem but in my opinion is the easiest way to work with images.

Answer 4

What about transform the image inside the overflow:hidden-container, bro/sis? :)
.post-prev-img {
height: 250px;
overflow: hidden;
}
.post-prev-img img {
transform: translateY(-40px)
}
Bootply-link (you should use that, too)