<div class="box">
<img src="iphone.png" alt="">
</div>
<div class="next-box"></div>
.box {
overflow: hidden;
}
.box img {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
}
.next-box {
position: relative;
}
.next-box:before {
content: "";
display: block;
width: 60px;
height: 60px;
background: #28c8c6 url(down-icon.png) no-repeat 20px 10px;
border-radius: 100%;
position: absolute
top: -30px;
left: 50%;
transform: translateX(-50%);
}
<div class="news-image">
<div class="news-blur" style="background: url(http://placehold.it/150x150);"></div>
<div class="text-overlay"></div>
<div class="news-title"><a href="#">Заголовок</a></div>
<div class="news-date">24.02.2017</div>
</div>
<img data-lazy="img/lazyfonz1.png"/>
$('.lazy').slick({
lazyLoad: 'ondemand',
});
<a href="#" class="link">
<span class="link__text">Ссылка</span>
<span class="link__border"></span>
</a>
.link {
position: relative;
display: inline-block;
}
.link__text {
position: relative;
z-index: 2;
}
.link__border {
display: block;
position: absolute;
bottom: 4px;
border-bottom: 4px solid #f00;
z-index: 1;
}
var formData = new FormData();
$(this).children('input').each(function() {
formData.append($(this).attr('name'), $(this).val());
});
if ( $(this).find('#file').length ) {
$.each($(this).find('#file')[0].files, function(i, file) {
formData.append('file-'+i, file);
});
}