Gallery dans div, img qui grossit sur hover et ascenceur
Bonjour,
J'utilise jquery pour afficher une gallery dans une div, comme ceci:
Code:
1
2
3
4
5
| <div class="container_image">
<ul class="thumb">
<li><a href="images/thumb1.jpg"><img src="images/thumb1.jpg" alt="" /></a></li>
<li><a href="images/thumb2.jpg"><img src="images/thumb2.jpg" alt="" /></a></li>.... |
Mon css est ceci:
Code:
1
2
3
4
| .container_image {
position: absolute;
overflow : visible;
} |
et mon hover est traité en javascript:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| $("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '80px',
height: '80px',
padding: '5px'
}, 400); |
Tout ceci fonctionne parfaitement, mon img grossit lorsque je passe dessus sauf que ma div contenant des images a une taille fixe et si j'augmente le nombre de mes images, elles dépassent de la div. Du coup, je veux mettre un ascenseur. Or si je mets un ascenseur dans ma div, par exemple avec un overflow: scroll; je me retrouve avec mes images se trouvant au bord de la div ne pouvant plus grossir correctement: je m'explique: le hover marche toujours mais l'affichage se fait à l'intérieur de la div uniquement et du coup l'image est rogné sur le hover.
Si vous avez des idées ou besoin de plus de détails, dites moi le. Merci beaucoup.
