JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<a href="#" tittle="cute kitten" class="gloss">
    <p></p>
</a>

CSS

body {
   background: #444;   
}

a {
    background: url('http://shechive.files.wordpress.com/2011/02/cute-kitten-21.jpg?w=500&h=315') no-repeat center center;
    background-size: 250px;
    cursor: pointer;
    display: block;
    height: 155px;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
    width: 155px;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
    box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

a:before {
    content: '';
    height: 300%;
    left: -10%;
    position: absolute;
    top: -7%;
    width: 300%;
    
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    
    -moz-box-shadow: 0 0 0 500px rgba(255,255,255,0.3);
    -webkit-box-shadow: 0 0 0 500px rgba(255,255,255,0.3);
    box-shadow: 0 0 0 500px rgba(255,255,255,0.3);    
}

a:hover:after {
    opacity: 0.5;
}

a p {
    background: rgba(80,70,145,0);
    height: 100%;
    width: 100%;
    
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

a:hover p {
    background: rgba(80,70,145,0.6);
}