Entiendo que es un post viejo el que estoy respondiendo y seguramente lo han solucionado pero no postearon la solución. Estoy con un problema similar, tengo que alinear horizontalmente 4 divs distribuidos equitativamente y en la forma responsiva o sea cambiando la resolución deben acomodarse.
Intenté copiar algo de lo que se puso en el ejemplo pero se me alinea todo a la izquierda.
Muchas gracias.
Código:
<div style="text-align: justify; width: 100%; ">
<div style="display: inline-block; width: 150px; 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; 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; 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; 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>
<div style="text-align: justify; width: 100%;">
<div style="display: inline-block; width: 150px; 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; 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; 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; 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>
<div style="text-align: justify; width: 100%;">
<div style="display: inline-block; width: 150px; 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; 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; 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; 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>
</div>
La clase contenedor alterna las imágenes presentadas cuando el mouse 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;
}