Insérer cadre avec effet hover sur image

**novis5** · 17/08/2017, 11h38

Bonjour,

J'avance petit à petit sur le développement de ma page. J'ai crée un effet hover sur une de mes images en me basant sur cette page : https://www.queness.com/post/844/cre...n-using-jquery

Mon code css ressemble aujourd'hui à cela:

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
<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;
 
 
 
    /* 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:65px;
 
    /* add spacing and make the whole row clickable*/
    padding:5px;
    display:INLINE-BLOCK;
}
 
.item .caption b {
    text-decoration:none;
    color:#9400D3;
    font-size:20px;    
    font-weight:bold;
        text-align:center;
        line-height:65px;
 
    /* add spacing and make the whole row clickable*/
    padding:5px;
    display:INLINE-BLOCK;
}
 
.item .caption p {
    padding:5px;    
    margin:0;
    font-size:16px;
        font-weight:light;
        text-align:center;
        line-height:65px
 
}
 
.item img {
    border:0;
 
    /* allow javascript moves the img position*/
    position:absolute;
}
 
.clear {
    clear:both;    
}
</style>
>

désormais, je souhaite insérer un cadre comme présenté dans l'effet "oscar" de cette page (http://epicadesign.fr/css3-des-effet...l-dimage/)mais je ne sait pas quelle ligne de script ajouter.

Par ailleurs, j'aimerais que le titre (item. a et item b) ainsi que la description (item.p) soient au centre de la vignette. J'ai beau modifier des éléments de ce script, je n'y parviens pas...

Merci beaucoup pour votre aide

Novis 5

**novis5** · 17/08/2017, 17h29

J'ai regardé le tuto proposé sur ce forum mais je n'y parviens pas.

J'insère le script css comme proposé mais je dois sûrement oublier quelque chose:

Code :

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

1
2
3
4
5
oGdi.DrawRectangle oGdi.ImageWidth / 2 - oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 - oGdi.ImageHeight / 5, _
                    oGdi.ImageWidth / 2 + oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 + oGdi.ImageHeight / 5, _
                    , vbRed, 2

Merci de bien vouloir m'aider

novis

**novis5** · 18/08/2017, 15h22

J'ai ce code qui correspond à mes attentes mais je ne parviens pas à l'intégrer dans ma page css. Quelqu'un pourrait m'aider?

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
.carre {
    position:absolute;
    top:100px;
    left:100px;
    width:300px;
    height:200px;
    border:1px solid transparent;
    transition:0.5s;
 
}
 
.carre:hover {
    border:1px solid red;
    width:350px;
    height:250px;
    top:75px;
    left:75px;
}

Peut-être dois-je ajouter

.item .carre

Ensuite niveau proportion je ne suis pas convaincue, j'aimerai que ce carré s'adapte à mes images et apparaissent environ à 30px du bord de mon image.
Question sûrement bête mais je ne vois pas comment et où intégrer ce code...

Merci à qui voudra bien m'éclairer

Novis

**ma5t3r** · 20/08/2017, 20h25

salut,
Pourquoi faire simple quand on peut faire compliqué ? :-)
Pourquoi utiliser du jQuery alors que tout ça peut être fait en CSS only ?

**novis5** · 21/08/2017, 10h52

Je suis d'accord avec toi ma5t3r mais alors explique moi car je suis novice et cela fait une semaine que je suis dessus. Là j'ai réussi à faire apparaître un carré mais il n'y a pas d'effet de transition comme je voudrais. Donc si tu as une astuce ou un lien qui pourrait m'aider... n'hésite pas, ce serait super sympa!
merci d'avance
Novis

**ParisElliot** · 21/08/2017, 12h23

Bonjour,

Regarde ici, 2 liens ou tu peux directement tester et modifier le code a ta guise :

https://codepen.io/jayanudin/pen/EPK...ow_forks=false

https://codepen.io/hi_mynameisdave/p...ow_forks=false

Ils sont en CSS only

**novis5** · 21/08/2017, 13h21

Merci pour votre réponse.
Mais , sauf erreur de ma part il n'y a pas de code pour faire apparaître un carré en hover comme dans l'image oscar de cette page:
http://epicadesign.fr/demos/HoverEffectImg/index.html
http://epicadesign.fr/css3-des-effet...survol-dimage/

Merci de m'éclairer...
Novis

**ParisElliot** · 21/08/2017, 13h54

Non en effet.

Mais la tu as le code, je comprends pas ce que tu nous demandes ?

**novis5** · 21/08/2017, 16h19

Et bien j'ai crée un texte qui s'affiche en hover sur une image. Je souhaitais insérer un carré blanc qui s'affiche également lorsque le texte apparait afin de le mettre en valeur comme dans l'effet oscar de cette page. http://epicadesign.fr/demos/HoverEffectImg/index.html

Ne parvenant pas à insérer ce script, j'en ai intégrer un autre qui fait apparaître un carré mais sans l'effet de transition...
Je souhaiterai désormais y intégrer la transition que l'on trouve dans l'effet oscar car moi mon carré s'affiche directement et je trouve que c'est moins beau.

Mon code css 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
159
160
161
162
163
164
165
166
<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:before {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border: 1px solid #fff;
        content: '';
        transition:0.5s;
 
}
 
 
 
 
 
 
 
 
.item .caption a {
	padding:25px; 2px; 
	text-decoration:none;
	color:#9400D3;
	font-size:20px;	
	font-weight:normal;
        text-align:center;
        line-height:normal;
 
}
 
 
 
	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}
 
.item .caption b {
	padding:25px; 2px; 
	text-decoration:none;
	color:#9400D3;
	font-size:20px;	
	font-weight:bold;
        text-align:center;
        line-height:normal;
 
 
 
 
	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}
 
.item .caption p {
	padding:25px; 5px; 25px; 5px;
	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>
>

le carré correspond à:
.item .caption before:
Que dois-je ajouter afin d'avoir une transition comme dans l'effet oscar? Afin d'avoir plus de fluidité...

Voilà, j'espère avoir été plus clair, c n'est pas évident de s'expliquer quand on est novice...

En tout cas merci de votre patience

Novis

**ParisElliot** · 22/08/2017, 10h21

D'accord je comprends mieux.

Peux-t-on avoir ton code complet ?

Et pourquoi tu ne prends pas le code de l'effet Oscar et tu l'arranges à ta sauce ?

**novis5** · 22/08/2017, 12h38

Bonjour Paris Elliot,
Merci pour ta réponse! c'est cool , jme suis bien expliqué cette fois!
J'ai déjà essayé d'insérer le code de l'effet oscar mais l'effet ne se produit pas et en modifiant certains éléments cela chamboule toute mon image. Bref je n'ai pas encore compris comment cela fonctionnait.

Jte donne mon code 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
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
159
160
161
162
163
<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:before {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border: 1px solid #fff;
        content: '';
        transition:0.5s;
 
}
 
 
 
 
 
.item .caption a {
	padding:25px; 2px; 
	text-decoration:none;
	color:#9400D3;
	font-size:20px;	
	font-weight:normal;
        text-align:center;
        line-height:normal;
 
}
 
 
 
	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}
 
.item .caption b {
	padding:25px; 2px; 
	text-decoration:none;
	color:#9400D3;
	font-size:20px;	
	font-weight:bold;
        text-align:center;
        line-height:normal;
 
 
 
 
	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}
 
.item .caption p {
	padding:25px; 5px; 25px; 5px;
	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>
>

Le carré correspond au .item . caption before.
Par contre si vous pouvez m'aider à intégrer le code de l'effet oscar cela serait génial! Mais j'aimerai comprendre comment cela fonctionne car j'ai déjà essayé de l'intégrer et ça ne marchait pas, donc je devais forcément faire une erreur quelque part...
merci de m'éclairer

novis

Insérer cadre avec effet hover sur image

jQuery

Discussions similaires

Partager

Partager