Insérer lien sur image hover

Version imprimable

18/08/2017, 11h35
novis5

Insérer lien sur image hover

Bonjour,

J'ai crée un texte qui apparaît au survol d'une image.

Seulement lorsque je veux y intégrer un lien vers une page de mon site, celui-ci n'est pas reconnu car l'image est en arrière plan (logique).

De ce fait, j'ai fait le lien sur le texte mais cela n'englobe pas la totalité de la vignette (toujours logique).

Est-il possible d'englober la totalité de la vignette avec un lien ou vaut-il mieux créer une deuxième image qui apparait au survol et seulement là intégrer le lien sur cette seconde image.

La 1ere solution serait vraiment bien mais je doute que cela soit possible.

Si vous avez des suggestions, n'hésitez pas

Merci par avance

Novis
18/08/2017, 11h53
SpaceFrog

On peut tout a fait créer un lien ...

Mais tu ne nous montre pas comment tu t'y prends ...
un peu de code serait utile ...

Oui bien sûr... pardon..

Pour mon code, je me suis basé sur le script https://www.queness.com/post/844/cre...n-using-jquery

mon code css est :

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
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
<title>Create A Thumbnail With Fading Caption Using jQuery</title>
<meta name="description" content="This time we are going to learn to create another thumbnail effect with fading and transparent caption."/>
<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>
body 
	{<strong>></strong>
  <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'>
<strong>></strong>}
 
 
.item {
	width:250px;
	height:250px;	
	border:2px 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:light;
        text-align:center;
        line-height:normal;
 
 
 
	/* 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:#9400D3;
	font-size:20px;	
	font-weight:normal;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
 
 
	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}
 
.item .caption b {
	text-decoration:none;
	color:#9400D3;
	font-size:20px;	
	font-weight:bold;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
 
 
 
	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}
 
.item .caption p {
	padding:2px; 2px; 5px; 2px;
	margin:2;
	font-size:16px;
        font-weight:light;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
 
}
 
.item img {
	border:0;
 
	/* allow javascript moves the img position*/
	position:absolute;
}
 
.clear {
	clear:both;	
}
</style>
>

et le code html est basé sur ce code:

Code:

1
2
3
4
5
6
7
<div class="item">
	<a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a>
	<div class="caption">
		<a href="">Title</a>
		<p>Description</p>
	</div>
</div>

merci pour votre aide, cela me paraît compliqué!

Novis

18/08/2017, 15h18
SpaceFrog

https://jsfiddle.net/5r8xkgru/

Merci pour l'aide.
Je pense insérer le code css au mauvais endroit. J'ai fait plusieurs essais mais cela ne fonctionne pas. Il doit y avoir un petit hic que je n'arrive à identifier.
J'ai insérer le css juste après .item caption a

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
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
<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>
body 
	{<strong>></strong>
  <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'>
<strong>></strong>}
 
 
.item {
	width:250px;
	height:250px;	
	border:2px 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:light;
        text-align:center;
        line-height:normal;
 
 
 
 
	/* 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:#9400D3;
	font-size:20px;	
	font-weight:normal;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
        .caption a:hover, .hovered { color:red;}
 
 
 
	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}
 
.item .caption b {
	text-decoration:none;
	color:#9400D3;
	font-size:20px;	
	font-weight:bold;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
 
 
 
	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}
 
.item .caption p {
	padding:2px; 2px; 5px; 2px;
	margin:2;
	font-size:16px;
        font-weight:light;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
 
}
 
.item img {
	border:0;
 
	/* allow javascript moves the img position*/
	position:absolute;
}
 
.clear {
	clear:both;	
}
</style>
>

si ce code est au bon endroit alors j'ai fait une erreur dans le html. Car le js je suis quasiment sûr que c'est ok.

Merci de votre réponse

Novis

nb: si il y a une erreur merci de m'expliquer, comme ça je ne la ferait plus;)

19/08/2017, 11h17
novis5

Juste pour info j'ai également essayé en enlevant le caption a et en le mettant directement à la suite mais cela ne fonctionne pas non plus...