JSFiddle - React, Tailwind, and code Playground

by Harisankaran Parameswaran

HTML

<div class="iniciocenter">
    <div class="bloqueinicio"><a href="?page_id=7"><div class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');"></div>nosotros</a>
    </div>
    <div class="bloqueinicio"><a href="?page_id=8"><div class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/cuentosh.png');"></div>cuentos</a>
    </div>
</div>

CSS

.iniciocenter {
    text-align: center;
}
.imghover2 {
    width:190px;
    height:190px;
}
.imghover2:hover {
    background-position:0px -190px;
}
.handlee {
    font-family: handlee;
    font-size: 24px;
    font-size: 1.714rem;
    line-height: 1.285714286;
    margin-bottom: 14px;
    margin-bottom: 1rem;
}
.bloqueinicio {
    display:inline-block;
    text-align: center;
    font-family: handlee;
    font-size: 22px;
    font-size: 1.971rem;
    color: #365F8B;
    width:190px;
    height:50px;
}
.bloqueinicio a {
    text-decoration: none;
    color: #375F8F;
}
.bloqueinicio a:hover {
    color: #FF8000;
}
.bloqueinicio a:hover .imghover2 {
    background-position:0px -190px;
}