Intenté el siguiente código pero se centra pero no se expande hacia los costados. Muchas gracias.
Código :
<div style="text-align: center; width: 100%;"> <div style="display: inline-block; width:150px; 150px !important; height: 117px;"> <div class="contenedor"> <a href="index.php/redireccion"> <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" /> </a> </div> </div> <div style="display: inline-block; width:150px; 150px !important; height: 117px;"> <div class="contenedor"> <a href="index.php/redireccion"> <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" /> </a> </div> </div> <div style="display: inline-block; width:150px; 150px !important; height: 117px;"> <div class="contenedor"> <a href="index.php/redireccion"> <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" /> </a> </div> </div> <div style="display: inline-block; width:150px; 150px !important; height: 117px;"> <div class="contenedor"> <a href="index.php/redireccion"> <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" /> </a> </div> </div> </div>
la clase contenedor permite alternar las imágenes que están presentadas cuando el cursor se posiciona sobre ellas.
Código :
.contenedor { position: relative; height: 90px; width: 315px; margin: 20px auto; } .contenedor img { position: absolute; left: 0; /* transition: opacity 1s ease-in-out; */ } .contenedor img.top:hover { opacity: 0; }