JSFiddle - React, Tailwind, and code Playground

CSS

.sk_wrap{
            overflow: hidden;
            width: 960px;
        }

            .sk_item{
                width: 300px;
                height: 300px;
                overflow: hidden;
                float: left;
                margin: 10px;
            }

                .sk_a1{
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 300px;
                }

                    .sk_a1 img{
                        display: block;
                        width: 100%;
                        min-height: 100%;

                    }

                    .sk_a1 .sk_meta1_outer{
                        width: 105%;
                        height: 105px;
                        position: absolute;
                        bottom: -2px;
                        left: -2px;
                        right: -2px;
                        overflow: hidden;
    
                    }

	                    .sk_a1 .sk_meta1{
	                        width: 105%;
	                        height: 105px;
	                        position: absolute;
	                        bottom: 0;
	                        left: 0;
	                        right: -10px;
	                       
                    
                        
                            -webkit-filter: blur(5px);
							-moz-filter: blur(5px);
							-ms-filter: blur(5px);
							-o-filter: blur(5px);
							filter: blur(5px);
                            background-image: url(http://static5.smi2.net/img/300x300/2257778.jpeg);
                            background-position:  bottom left;
                            
	                    }  

.sk_meta1:before {
    height: 105%;
    width: 105%;
    opacity: 0.3;
    content : ''; 
    background-color: green;
    position: absolute;
}


                    .sk_a1 .sk_meta2{
                        width: 260px;
                        height: 60px;
                       ...

JavaScript

(function (jQuery){

                data = {
                            "news": [{
                                "img": "http://static5.smi2.net/img/300x300/2257778.jpeg",
                                "title": "Роботы Роботы Роботы Роботы Роботы Роботы",
                                "announce": "Роботы Роботы Роботы Роботы ",
                                "url": "http://",
                                "id": "674190"
                            }]
                        }
	            var sk_wrap,
	                sk_item,
	                sk_a1,
	                sk_meta,
	                sk_announce,
	                sk_meta2,
	                result,
	                obj_title_cropped,
	                obj_announce_cropped;

	            sk_wrap = jQuery('<div class="sk_wrap" />');

	            jQuery.each(data.news, function(idx, obj) {
	            	obj_title_cropped = obj.title.slice(0, 15)
	            	obj_announce_cropped = obj.announce.slice(0, 58);
	            	//obj_announce_cropped = obj.announce.slice(0, 58).replace(/\s/g,"&nbsp;");

	                sk_meta1 = jQuery('<div class="sk_meta1_outer"></div>').append('<div class="sk_meta1"></div>');
	                sk_meta2 = jQuery('<div class="sk_meta2"></div>').append('<div class="sk_title1">' + obj_title_cropped + '</div>').append('<div class="sk_announce">' + obj_announce_cropped + '</div>');
	                sk_a1 = jQuery('<a class="sk_a1" href="' + obj.url + '" id="' + obj.id + '"></a>').append('<img src="' + obj.img + '" alt="' + obj.title + '" />').append(sk_meta1).append(sk_meta2);
	                sk_item = jQuery('<div class="sk_item" />').append(sk_a1);
	                sk_wrap.append(sk_item);
	            });            

	            jQuery('body').append(sk_wrap);

        })($);