[CSS] Overflow:hidden bug Mozilla/IE

Marsh Posté le 09-09-2014 à 12:49:19

Bonjour à tous, j'ai fait une légende sur des images qui apparaît lors du passage de la souris. Cependant sur mozilla et ie la légende apparaît en dessous de l'image et lorsque je met la souris la légende se contente de remonter.
Voici mon code :

Code :

.cont {
display: table;
margin: 0 auto;
}
figure {
display: table;
overflow: hidden;
overflow-y: hidden;
position: relative;
}
figure img {
display: block;
}
figure figcaption {
font-family: 'PT Sans Narrow';
font-size: small;
background: black;
bottom: -91px;
color: white;
padding: 16px;
position: absolute;
transition: bottom .5s;
-webkit-transition-property: top, bottom;
-webkit-transition-duration: .5s;
-moz-transition: bottom .5s;
-o-transition: bottom .5s;
text-shadow: 1px 1px black;
width: 93%;
}
figure:hover figcaption {
bottom: 0;
}

J'ai essayé avec overflow-y: hidden; mais rien ne change. http://jegou-photo.besaba.com/portfolio.php

Message édité par sparadra1 le 09-09-2014 à 12:50:05

Marsh Posté le 09-09-2014 à 12:49:19

Marsh Posté le 10-09-2014 à 13:24:07

up psl

Marsh Posté le 10-09-2014 à 21:10:47

Pourquoi utilises-tu un "display: table" pour l'élément contenant ? Ça ne serait pas inline-block ou block que tu voudrais ?

Marsh Posté le 11-09-2014 à 18:44:21

Effectivement. Merci

Marsh Posté le 12-09-2014 à 16:28:31

Au passage, ça serait bien que tu adaptes le poids (ko) de tes images quand elles sont en vignette car là, tu affiche des images de grandes taille en tout petit. Du coup, ta page met 3 plombes pour se charger :pfff: