JSFiddle - React, Tailwind, and code Playground

by denisz

HTML

<div class="div">
    <div class="div0">
        <div class="div1"><img width="600" src="http://berezka.berezkaonline.ru.images.1c-bitrix-cdn.ru/upload/medialibrary/24c/24c665dc4c984c54ed373f8bdf4e6fde.jpg?1429796196730552
" /></div>
        <img width="600" height="200" src="http://berezka.berezkaonline.ru.images.1c-bitrix-cdn.ru/upload/medialibrary/24c/24c665dc4c984c54ed373f8bdf4e6fde.jpg?1429796196730552
" />
    </div>


<div class="div">
    <div class="div0">
        <div class="div1"><img width="600" src="http://berezka.berezkaonline.ru.images.1c-bitrix-cdn.ru/upload/medialibrary/d40/d401761e16e753e6aae556ffb8310f7a.jpg?1429796196160048" /></div>
        <img width="600" height="200" src="http://berezka.berezkaonline.ru.images.1c-bitrix-cdn.ru/upload/medialibrary/d40/d401761e16e753e6aae556ffb8310f7a.jpg?1429796196160048" />
    </div>
    
    <div class="div0">
        <div class="div1"><img width="600" height="200" src="http://berezka.berezkaonline.ru.images.1c-bitrix-cdn.ru/upload/medialibrary/7c3/7c3f4744dede32fa30fcc96d18d6f232.jpg?1429796194115480" /></div>
        <img width="600" height="200" src="http://berezka.berezkaonline.ru.images.1c-bitrix-cdn.ru/upload/medialibrary/7c3/7c3f4744dede32fa30fcc96d18d6f232.jpg?1429796194115480" />
    </div>
    <div class="div0">
        <div class="div1"><img width="600" src="http://berezka.berezkaonline.ru.images.1c-bitrix-cdn.ru/upload/medialibrary/635/6353652cd3bcab07606092ecbfe8f6f6.jpg?1429796195249178" /></div>
        <img width="600" height="200" src="http://berezka.berezkaonline.ru.images.1c-bitrix-cdn.ru/upload/medialibrary/635/6353652cd3bcab07606092ecbfe8f6f6.jpg?1429796195249178" />
    </div>
</div>

CSS

.div {
    position: absolute;
    z-index: 2;
    transition-duration: 0s;
    -webkit-transform: translate3d(0px, -11px, 0px);
}
.div0 {
    width: 600px;
    height: 200px;
    background: #fff;
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 3;
}
.div1 {
    display: block;
    width: 100%;
    height: 30%;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    -webkit-filter: blur(5px);
}
.div1 img {

    width: 100%;
    height: auto;
    display: block;

}