Bonjour à tous et j'en profite pour vous souhaiter une bonne année,
Je cherche à mettre des légendes (figcaptions) qui font 50 px de haut, placées à bottom-50px et bottom:0px lors du hover.
Malheureusement, je n'arrive à aucun résultat
Le problème a beau être celui d'un débutant, je n'arrive pas à le résoudre (bon, faut avouer que suis un poil débutant)
Une partie du html :
et des CSS :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 <div class="grid"> <div class="grid__item" data-size="1280x857"> <a href="img/original/6.jpg" class="img-wrap"> <figure tabindex="0"> <figcaption> <img src="img/thumbs/6.jpg" alt="img06" /> </figcaption> </figure> <div class="description description--grid"> <h3>Mother's Love</h3> <p>Every time you drink a glass of milk or eat a piece of cheese, you harm a mother. Please go vegan. <em>— Gary L. Francione</em></p> <div class="details"> <ul> <li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li> <li><i class="icon icon-focal_length"></i><span>22.5mm</span></li> <li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li> <li><i class="icon icon-exposure_time"></i><span>1/1000</span></li> <li><i class="icon icon-iso"></i><span>80</span></li> </ul> </div> </div> </a>
Merci pour votre aide et de nouveau tous mes vœux pour 2016
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 .figure { position: relative; width: 270px; padding: 10px; } .figcaption { position: relative; width: 270px; height: 50px; text-align: center; color: #fff; text-shadow: 0 0 0; overflow: hidden; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; background-color: rgba(51,51,153,0.6); margin-bottom: -50px; } .figcaption span { display: block; } .figure:hover figcaption, .figure:focus figcaption { background: rgba(0,0,0); background: rgba(0,0,0,0.8); margin-botton: 0px; } .grid__item--current { opacity: 0 !important; } .img-wrap { display: block; } .img-wrap:focus, .img-wrap:hover { outline: none; } .img-wrap img { display: block; max-width: 100%; }
dh
Partager