JSFiddle - React, Tailwind, and code Playground

by bodine30

HTML

<div id="fillmurray" class="component" data-messages="6">
    <h2>Hover over the box</h2>
    <div>The blur filter doesn't have much support outside of webkit, and it will likely be that way for awhile. You might be able to acheive a similar effect with box shadow.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eos nostrum dignissimos earum id porro quod blanditiis enim facilis distinctio adipisci ipsum laboriosam hic sunt asperiores tempore alias voluptatem saepe.</div>
</div>
<div class="component" data-messages="2">
    <h2>CSS Blur Filter</h2>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eos nostrum dignissimos earum id porro quod blanditiis enim facilis distinctio adipisci ipsum laboriosam hic sunt asperiores tempore alias voluptatem saepe.</div>
    <div>Nam placeat quasi. Quos temporibus eius unde aliquam ducimus tempore perferendis id tenetur sapiente natus minima suscipit laboriosam nesciunt nihil provident asperiores dicta sit porro veniam ipsam. Sint veritatis ipsum!</div>
</div>

CSS

*, *:before, *:after {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
body {
    font:normal 16px/1.5 "Segoe UI Light", "Helvetica", sans-serif;
    display:flex;
    justify-content:space-around;
}
#fillmurray, #fillmurray:before {
    background-image:url(http://www.fillmurray.com/400/400);
}
.component {
    position:relative;
    overflow:hidden;
    background:url(http://www.lorempixel.com/400/400);
    background-position: 0 0;
    width: 400px;
    height: 400px;
    padding: 1em 1em 5em;
}
.component:hover:after, .component:hover:before, .component:after, .component:before {
    transition: all 1s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}
.component:after, .component:before {
    position:absolute;
    width:100%;
    height:100%;
    top: 0; left: 0; right: 0; bottom: 0;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);    
    padding: inherit;
    background-repeat: repeat;
    background-position: 0 0;
    text-align: right;
    color: white;    
}
.component:hover:after, .component:hover:before {
    -webkit-transform: translate3d(0,70%,0);
    transform: translate3d(0,70%,0);
    opacity:1;
    background-position: 0 120px;
}
.component:hover:before {
    -webkit-filter: blur(4px) brightness(85%);
    box-shadow: 0 0 50px rgba(0,0,0,0.6),inset 0 50px 80px -40px rgba(255,255,255,0.3);
}
.component:before {
    content:"";
    background-image: url(http://www.lorempixel.com/400/400);
    -webkit-filter: blur(0px) brightness(140%);
}
.component:after {
    content:"messages: (" attr(data-messages) ")";
    opacity:0;
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
    margin-left: 50em;
    transition:margin-left 0.75s cubic-bezier(0.230, 1.000, 0.320, 1.000) 50ms;
}
.component:hover:after {
    margin-left: 0;
    transition:margin-left 0.75s cubic-bezier(0.230, 1.000, 0.320, 1.000) 50ms;
}
.component > * {
    background:rgba(255,255,255,.25);
    padding:.5em 1em;
    margin:0;
}