Ajout cadre sur image au survol de la souris
Fermé
canvas
Messages postés
50
Date d'inscription
samedi 26 mars 2011
Statut
Membre
Dernière intervention
22 septembre 2023
-
17 août 2017 à 14:26
canvas Messages postés 50 Date d'inscription samedi 26 mars 2011 Statut Membre Dernière intervention 22 septembre 2023 - 18 août 2017 à 17:40
canvas Messages postés 50 Date d'inscription samedi 26 mars 2011 Statut Membre Dernière intervention 22 septembre 2023 - 18 août 2017 à 17:40
A voir également:
- Ajout cadre sur image au survol de la souris
- Quelle touche pour débloquer la souris ? - Guide
- Image iso - Guide
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? - Forum Musique / Radio / Clip
- Acronis true image - Télécharger - Sauvegarde
- Image de profil - Guide
1 réponse
canvas
Messages postés
50
Date d'inscription
samedi 26 mars 2011
Statut
Membre
Dernière intervention
22 septembre 2023
18 août 2017 à 17:40
18 août 2017 à 17:40
Bonjour,
J'ai trouvé ce code pour intégrer un carré dans mon image au survol de ma souris.
néanmoins, je n'arrive pas à l'intégrer à mon css.
J'ai l'impression que je ne fais pas correctement et que du coup ce code ne fait pas le lien avec mon css. Car en effet, lorsque j'insère ce code, rien ne change. Peut-être que je ne l'insère pas au bon endroit. ou alors les données que j'ai mises ne sont pas bonnes... bref je suis perdu
mon css est:
j'ai essayé aussi en mettant :
.item .carre { "et la suite du code....
Mais cela ne fonctionne pas non plus.
Merci de m'éclairer et afin qu'enfin je comprenne ce que je ne fais pas correctement
Canvas
J'ai trouvé ce code pour intégrer un carré dans mon image au survol de ma souris.
.carre {
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1px solid transparent;
transition:0.5s;
}
.carre:hover {
border:1px solid red;
width:250px;
height:250px;
top:75px;
left:75px;
}
néanmoins, je n'arrive pas à l'intégrer à mon css.
J'ai l'impression que je ne fais pas correctement et que du coup ce code ne fait pas le lien avec mon css. Car en effet, lorsque j'insère ce code, rien ne change. Peut-être que je ne l'insère pas au bon endroit. ou alors les données que j'ai mises ne sont pas bonnes... bref je suis perdu
mon css est:
</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>
>
j'ai essayé aussi en mettant :
.item .carre { "et la suite du code....
Mais cela ne fonctionne pas non plus.
Merci de m'éclairer et afin qu'enfin je comprenne ce que je ne fais pas correctement
Canvas
