Discussion :

[dhillig]

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

[Invité]

Bonjour,
Bonne Année à toi aussi.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<figure tabindex="0"><figcaption>
                    <img src="img/thumbs/6.jpg" alt="img06" />
                    </figcaption></figure>

Ce n'est pas la légende, mais l'image que tu as mis dans le <figcaption>.

Tu l'aurais vu si tu avais fait une indentation correcte du code...

[dhillig]

Bonsoir jreaux62,
Je vois bien ce que tu veux dire, mais je suis incapable de le faire, je n'y arrive pas ! TROP NUL...
J'ai pourtant bossé sur ce genre de trucs... sur les :hover (avec ou sans animation)
J'ai tenté des tas e choses :p
Bonne année à toi et aux membres du site de nouveau.
dh

[Invité]

Commence déjà par écrire un code HTML cohérent (= les balises aux bons endroits, fermées où il faut,... + indentation pour une meilleure lisibilité)

[dhillig]

Slt jreaux62,
Merci de ne pas m'avoir donné de réponse, mais uniquement une base sur laquelle réfléchir. Ça fait avancer... pas mal
Actuellement, j'ai bien ma "figcaption"8 -)
Malheureusement, placée à -20px, elle reste visible (en dessous de l'image donc)
Et lors du hover, la transition ne fonctionne pas
Mais j'y suis presque
Mes nouvelles 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
.grid__item .figcaption {
    width: 270px;
    height: 20px;
    position: absolute;
}
 
.grid__item span {
    width: 270px;
    color: #FFF;
    text-transform: uppercase;
    font-size: 20px;
    text-align: center;
    position: absolute;
    bottom: -20x;
    font-family: 'Din';
    background: #222;
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
}
 
.grid__item:hover span {
    bottom: 0px;
}

et le html (plus propre) :

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
			<div class="grid">
				<div class="grid__item" data-size="1280x857">
					<a href="img/original/6.jpg" class="img-wrap"><img src="img/thumbs/6.jpg" alt="img06" />
                  <div class="figcaption"></div><span>Photographie<br/>Paris</span>
						<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>
				</div>

Merci pour ton aide et bonne journée,
dh

[NoSmoking]

Bonjour,

Actuellement, j'ai bien ma "figcaption"8 -)

une classe figcaption mais pas un élément HTML !

Et lors du hover, la transition ne fonctionne pas...

Il faut toujours lorsque l'on tâtonne oublier les effets qui seront la cerise sur le gâteau, en gros fait fonctionner du simple pour commencer.


Pour rappel, en faisant simple, un élément positionné en absolute l'est par rapport à son premier parent positionné.