JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row categorias-home">
   
    <div class="col-md-3 col-xs-4 thumb"> <a class="thumbnail" href="#">
        <div class="classeImagem"></div>
        </a>
       <div> 
      
        </div>
      

    </div>
        <div class="col-md-3 col-xs-4 thumb"> <a class="thumbnail" href="#"><img class="img-responsive" src="http://i.imgur.com/0fhGV8i.jpg" alt="" style="">
        
        </a>
        <div>
        <h2 class="texto">GIRLS</h2>
        </div>
            </div>
            
            <div class="col-md-3 col-xs-4 thumb"> <a class="thumbnail" href="#"><img class="img-responsive" src="http://i.imgur.com/thSdrD6.jpg" alt="" style="">
        
        </a>
        <div>
        <h2 class="texto">MX</h2>
        </div>
            </div>
         
</div>
            <div class="row categorias-home">
   
    <div class="col-md-3 col-xs-4 thumb"> <a class="thumbnail" href="#"><img class="img-responsive" src="http://i.imgur.com/RCzouTz.jpg" alt="" style="">
        
        </a>
        <div>
        <h2 class="texto">SURF</h2>
        </div>
      

    </div>
        <div class="col-md-3 col-xs-4 thumb"> <a class="thumbnail" href="#"><img class="img-responsive" src="http://i.imgur.com/0fhGV8i.jpg" alt="" style="">
        
        </a>
        <div>
        <h2 class="texto">MTB</h2>
        </div>
            </div>
            
            <div class="col-md-3 col-xs-4 thumb"> <a class="thumbnail" href="#"><img class="img-responsive" src="http://i.imgur.com/thSdrD6.jpg" alt="" style="">
        
        </a>
        <div>
        <h2 class="texto">BMX</h2>
        </div>
            </div>
         
</div>
            
            <div class="row...

CSS

.texto{
   
    color:#fff;
  
    z-index:2;
    text-align:center;
    margin-bottom:100px;
    
   background-color:#000;
 
   
}

.classeImagem{
    background: url("http://i.imgur.com/thSdrD6.jpg");
}

.texto:hover{
     color:#000;
     width:100%;
    background-color:#fff;
}
.img-responsive{
    width:100%;
     opacity:0.5;  
    z-index:1;
}
.thumb{
    
}

.thumb img{

    
}

.thumb img:hover{
    opacity:0.5;    
    transform:scale(1.1);
   
   }