Как реализовать такую идею для картинок в полной новости?

к второй картинке забыл .png добавить.

В чем вопрос то? Спойлеров в инете куча, бери любой, какой понравится. Градиент после спойлера поставить, либо с отрицательным margin-top или position:absolute как лучше подойдёт.

html:
<div class="post_assets post_assets-ovh">
<!-- Изображение -->
<img src="site.ru/image.png" class="post_assets-img">
</div>

css:
.post_assets{
transition: all .5s ease;
}
.post_assets-ovh{
cursor: pointer;
max-height: 100px; /* высота отображаемой картинки, после загрузки страницы */
overflow: hidden;
}

js (jquery):
$(document).ready(function(){
$('.post_assets-ovh').click(function(){
$('.post_assets').css({"max-height": "1000px"});
setTimeout(function() { $('.post_assets').removeClass('post_assets-ovh'); }, 500); // 500 - задержка времени в ms = задержке .5s заданной в css-файле
});
});