Discussion :

[novis5]

Bonjour,
J'ai un site internet sur lequel je voudrais insérer du texte qui apparaît au survol d'une image. Exemple sur cette page :
http://www.queness.com/resources/htm...ail/index.html
J'ai donc copié le script de cette page, modifié les images, les dimensions et le texte.
Les images apparaissent correctement néanmoins l'effet de survol ne fonctionne pas, je dois sûrement oublier quelque chose mais je ne sais plus où chercher! D'où ma venue sur ce forum.
Comme vous l'aurez sûrement compris je suis débutante et j'ai vraiment besoin de votre aide.
Merci par avance
Novis 5

NB:Si toutefois vous avez un code plus adapté, n'hésitez pas
Pour infos, le code inséré est:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<meta content="This time we are going to learn to create another thumbnail effect with fading and transparent caption." name="description" /><script src="js/jquery-1.3.1.min.js"></script><script>
 
$(document).ready(function() {
 
//move the image in pixel
var move = -15;
 
//zoom percentage, 1.2 =120%
var zoom = 1.2;
 
//On mouse over those thumbnail
$('.item').hover(function() {
 
//Set the width and height according to the zoom percentage
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;
 
//Move and zoom the image
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
 
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});
 
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
 
});
 
</script>
<style type="text/css">body {
font-family:arial;
}
 
.item {
width:250px;
height:250px;
border:4px solid #222;
margin:5px 5px 5px 0;
 
/* required to hide the image after resized */
overflow:hidden;
 
/* for child absolute position */
position:relative;
 
/* display div in line */
float:left;
}
 
.item .caption {
width:250px;
height:250px;
background:#000;
color:#fff;
font-weight:bold;
 
/* fix it at the bottom */
position:absolute;
left:0;
 
/* hide it by default */
display:none;
 
/* opacity setting */
filter:alpha(opacity=80); /* ie */
-moz-opacity:0.8; /* old mozilla browser like netscape */
-khtml-opacity: 0.8; /* for really really old safari */
opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */
 
}
 
.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:16px;
 
/* add spacing and make the whole row clickable*/
padding:5px;
display:block;
}
 
.item .caption p {
padding:5px;
margin:0;
font-size:10px;
}
 
.item img {
border:0;
 
/* allow javascript moves the img position*/
position:absolute;
}
 
.clear {
clear:both;
}
</style>
<div class="item"><a href="#"><img alt="Peintures" height="250" src="1.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>
<div class="caption" style="display: none;"><a href="">Peintures</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
 
<div class="item"><a href="#"><img alt="Boutique en Ligne" height="250" src="2.gif" title="" width="250" /></a>
 
<div class="caption"><a href="">Boutique en Ligne</a>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
 
<div class="item"><a href="#"><img alt="Sculptures" height="250" src="3.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>
 
<div class="caption" style="display: none;"><a href="">Sculptures</a>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
 
<div class="clear">&nbsp;</div>
 
<div class="item"><a href="#"><img alt="Expositions" height="125" src="4.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>
 
<div class="caption" style="display: none;"><a href="">Expositions</a>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
 
<div class="item"><a href="#"><img alt="Défiscalisations" height="250" src="5.gif" title="" width="250" /></a>
 
<div class="caption"><a href="">D&eacute;fiscalisations</a>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
 
<div class="item"><a href="#"><img alt="Contact" height="250" src="6.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>
 
<div class="caption" style="display: none;"><a href="">Contact</a>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
 
<div class="clear">&nbsp;</div>
<!-- START: Ignore this, not required by this tutorial --><script type="text/javascript">
if (typeof jQuery === 'undefined') document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>');
var url = 'http://www.queness.com/post/844/create-a-thumbnail-with-fading-caption-using-jquery';
var title = 'Create A Thumbnail With Fading Caption Using jQuery';
var content = '<p>This time we are going to learn to create another thumbnail effect with fading and transparent caption.</p>';
</script><script type="text/javascript" src="http://www.queness.com/assets/js/demo.js"></script><!-- END -->

[novis5]

Bonjour,
Je cherche dans le forum d'où pourrait venir mon erreur mais je n'y parviens pas.
Ceci étant, en surfant j'ai trouvé un site super qui donne des codes pour faire des effets de survol:
http://epicadesign.fr/css3-des-effet...survol-dimage/

Le script qui m'intéresse est oscar
Oscar

Code HTML:

Code :

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

1
2
3
4
5
6
7
8
9
10
<div class="grid">
                    <figure class="effect-oscar">
                        <img src="img/10.jpg" alt="img10"/>
                        <figcaption>
                            <h2>Warm <span>Oscar</span></h2>
                            <p>Oscar is a decent man. He used to clean porches with pleasure.</p>
                            <a href="#">View more</a>
                        </figcaption>            
                    </figure>
                </div>

Code CSS:

Code :

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

1
2
3
4
5
6
7
8
9
10
figure.effect-oscar{background:-webkit-linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%);background:linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%)}
figure.effect-oscar img{opacity:.9;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-oscar figcaption{padding:3em;background-color:rgba(58,52,42,0.7);-webkit-transition:background-color .35s;transition:background-color .35s}
figure.effect-oscar figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:''}
figure.effect-oscar h2{margin:20% 0 10px 0;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
figure.effect-oscar figcaption::before,figure.effect-oscar p{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(0);transform:scale(0)}
figure.effect-oscar:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-oscar:hover figcaption::before,figure.effect-oscar:hover p{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
figure.effect-oscar:hover figcaption{background-color:rgba(58,52,42,0)}
figure.effect-oscar:hover img{opacity:.4}

Là je réussi à insérer les codes; par contre je souhaiterai redimensionner l'effet et le faire ainsi se caler sur l'image mais je n'y parviens pas.

Peut-être saurez-vous m'aider
Merci d'avance

Novis