Muy buenas a todos,
Por adelantado gracias por la ayuda. Es la primera vez que posteo algo, y también mi primera vez como "desarrollador web". Quiero decir que soy novato, así que no seáis muy duro conmigo.
Estoy creando la web de mi propia empresa, y estoy utilizando un efecto slider que pongo a continuación:
html en la página:
<div id="montage-wrap">
<div class="montage-block"> <span id="block1"></span>
<div class="thumb_content">
<p style="font-size: 22px;">socios fundadores </p>
<p><a href="xxxx.html">xxxxxxxxxxxxxxxx</a></p>
<p><a href="xxxx.html">xxxxxxxxxxxxxxxx</a></p>
<p><a href="xxxx.html">xxxxxxxxxxxxxxxx</a></p>
</div>
</div>
</div>
css en la hoja de estilos:
#montage-wrap {
width: 820px;
height: 214px;
}
.montage-block {
width: 274px;
height: 214px;
float: left;
display: block;
overflow: hidden;
position: relative;
margin: 0 4px 0 0;
background-color: #20552a;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #d6d6d6;
border-right-color: #d6d6d6;
border-bottom-color: #d6d6d6;
border-left-color: #d6d6d6;
}
.montage-block:last-child {
margin: 0;
} /* removes margin on last block */
#block1 {
width: 274px;
height: 214px;
position: absolute;
display: block;
background: url("../images/picture1.jpg") no-repeat;
-webkit-transition: top .7s ease-in-out;
Con esto consigo que al aproximar el cursor a la imagen, esta suba con un efecto slider y me deja ver el texto de atrás.
La cuestión es que con el -webkit-transition: top .7s ease-in-out; solo consigo que funcione en chrome y safari, y quiero que funcione en todos los navegadores.
Me gustaría que me explicasen que tengo que añadir para conseguirlo.
Gracias