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 :
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>&mdash; 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>&fnof;/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>
et des CSS :
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%;
}
Merci pour votre aide et de nouveau tous mes vœux pour 2016
dh