JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="hero">
    <div class="bg">
        <a href="#" class="logo"><img src="http://i.imgur.com/bCl7r.png"></a>
    </div>
</div>

CSS

.hero{
    width:100%;
    height:400px;
    background: url(http://i.imgur.com/fUyhY.jpg) top center no-repeat;
    background-size:cover;
}
.hero .bg{
    background-color: transparent;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,0.7)));
    background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.7));
    background-image:    -moz-linear-gradient(top, transparent, rgba(0,0,0,0.7));
    background-image:      -o-linear-gradient(top, transparent, rgba(0,0,0,0.7));
    background-image:         linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)); 
    width:100%;
    height:100%;
}

.logo img{
    display:block;
    max-width:600px;
    margin:0 auto;
    padding-top:150px;
    -webkit-filter:blur(15px);
  -webkit-transition: all 0.3s ease; 
     -moz-transition: all 0.3s ease; 
       -o-transition: all 0.3s ease; 
          transition: all 0.3s ease; 

}
.logo img.clear{
    -webkit-filter:blur(0px);
}

.hero p{
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    color: white;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 100;
    margin-top: 80px;
    line-height: 30px;
    text-shadow: 0 0px 10px white, 0 1px 2px black;
    }

JavaScript

setTimeout(function(){
    $('img').addClass('clear');
}, 500);