Discussion :

[novis5]

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]

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]

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]

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

[novis5]

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]

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