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;
} 