<script>
//Добавляем надпись на размытое фото
$('#rec42224488 .t552__blockimg:eq(2) , #rec42224608 .t552__blockimg:eq(2)').append('<div class="moretext">Показать ещё модели ►►►</div>');
//Клик по первому размытому блоку
$('#rec42224488').click(function() {
//Считываем высоту фото и присваиваем её для всех блоков
var visota = $(".t552__blockimg").css("height");
$('.t552__blockimg').css("height", visota);
//Скрываем первый размытый блок
$('#rec42224488').slideUp(500);
//Показываем нижний блок + 1 размытый
$('#rec42224495 , #rec42224608').slideDown(1000);
});
//Клик по второму размытому блоку
$('#rec42224608').click(function() {
//Скрываем первый размытый блок
$('#rec42224608').slideUp(500);
//Показываем нижний блок + 1 размытый
$('#rec42224782').slideDown(1000);
});
</script>
<style>
/*Скрываем лишние блоки на старте*/
#rec42224495, #rec42224608 , #rec42224782 { display: none; }
/*Задаём прозрачность и размытие для нужных блоков блоков*/
#rec42224488 , #rec42224608 {
cursor: pointer;
/* opacity: 0.3;
-webkit-filter: blur(5px);
filter: blur(5px); */
}
/*Стили для текста на фото*/
.moretext {
color: #ffffff;
font-family: Roboto;
font-size: 20px;
text-align: center;
padding-top: 25%;
}
/*Стили для текста на малых экранах*/
@media screen and (max-width: 960px) {
.moretext {
font-size: 16px;
padding-top: 20%;
}}
</style>