JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/hover.css">
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900">
    </head>
    <body>
        <main>
            <div class="hover">
                <div class="description">
                    <h3>Title</h3>
                    <a>This is a long description, I don't know what to write here.</a>
                </div>
                <img src="https://images.unsplash.com/photo-1445127040028-b1bdb9acd16e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=5f10c1c850239222d20e96ae1b8b5862">
            </div>
        </main>
    </body>
</html>

CSS

* {
    font-family: "Raleway", Century Gothic;
}

body {
    margin: 0px;
    width: 100%;
}

.hover {
    width: 33.333333333333%;
    float: left;
    position: relative;
}

.hover > .description {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

}

.hover > img {
   width: 105%;
    filter: blur(5px);
    transition: 0.3s ease;
    margin: -5px -10px -10px -5px;
}

.hover:hover > img {
    filter: blur(0px);
    transition: 0.3s ease;
}

.hover > .description > h3,
.hover > .description > h3:after {
    
    color: #fff;
    z-index: 3;
    transition: 0.3s ease;
    
}

.hover:hover > .description > h3 {
    transition: 0.3s ease;
    
}

.hover > .description > a,
.hover > .description > a:after {
    
    color: #fff;
    z-index: 3;
    transition: 0.3s ease;
    
}

.hover:hover > .description > a {
    transition: 0.3s ease;
    
}