JSFiddle - React, Tailwind, and code Playground

by shryme

HTML

<div class="outer">
    <div class="inner"
    </div>
</div>

CSS

.outer { width:500px; height:500px; overflow:hidden; background-color:black; position:relative; }

.inner { width:100%; height:100%; background:url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.jpg); background-size:cover;
    -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
    -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */}

.outer:hover .inner {     -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    will-change: transform;
    transform: scale(1.5);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);     -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
    -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */}