JSFiddle - React, Tailwind, and code Playground

by danielugalde

HTML

<div class="wrapper-edecanes">
    
    <div class="item-edecan">
        <div class="img">
            <a href="#">
                <img src="http://edecanesaaa.mx/edecanes/images/edecanes_thumb/7/zoom/1366673984DSC_8918copy.jpg" alt=""/>
            </a>            
        </div>
    </div>
    
     <div class="item-edecan">
        <div class="img">
            <a href="#">
                <img src="http://edecanesaaa.mx/edecanes/images/edecanes_thumb/7/zoom/1366673984DSC_8918copy.jpg" alt=""/>
            </a>            
        </div>
    </div>
    
    <div class="item-edecan">
        <div class="img">
            <a href="#">
                <img src="http://edecanesaaa.mx/edecanes/images/edecanes_thumb/7/zoom/1366673984DSC_8918copy.jpg" alt=""/>
            </a>            
        </div>
    </div>
    
    <div class="item-edecan">
        <div class="img">
            <a href="#">
                <img src="http://edecanesaaa.mx/edecanes/images/edecanes_thumb/7/zoom/1366673984DSC_8918copy.jpg" alt=""/>
            </a>            
        </div>
    </div>
    
    <div class="item-edecan">
        <div class="img">
            <a href="#">
                <img src="http://edecanesaaa.mx/edecanes/images/edecanes_thumb/7/zoom/1366673984DSC_8918copy.jpg" alt=""/>
            </a>            
        </div>
    </div>
    
    <div class="item-edecan">
        <div class="img">
            <a href="#">
                <img src="http://edecanesaaa.mx/edecanes/images/edecanes_thumb/7/zoom/1366673984DSC_8918copy.jpg" alt=""/>
            </a>            
        </div>
    </div>
    
</div>

CSS

.wrapper-edecanes{
    display: block;
    width: 80%;
    margin: 150px auto;
    background: green; 
    float:left;
}
.wrapper-edecanes > .item-edecan{
    width: 100px;
	height: 100px;
	display: block;
	float: left;
	background: red;
    margin:5px;
}

.wrapper-edecanes > .item-edecan >.img{
   overflow: hidden;
    width: 100px;
	height: 100px;
    background:#858585;
    
}
.wrapper-edecanes >.item-edecan > .img > a{
display: block;
width: 100px;
height: 100px;
overflow: hidden; 
position:absolute;    
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

.wrapper-edecanes >.item-edecan > .img > a > img{
        -webkit-filter: grayscale(100%);
           -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
             -o-filter: grayscale(100%);
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    
}
.wrapper-edecanes > .item-edecan:hover .img a img{
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    filter:none; /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE 6-9 */
}