Ajout cadre sur image au survol de la souris
canvas
Messages postés
50
Date d'inscription
Statut
Membre
Dernière intervention
-
canvas Messages postés 50 Date d'inscription Statut Membre Dernière intervention -
canvas Messages postés 50 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'aimerai ajouter un cadre qui apparaît sur une image au survol de la souris comme présenté sur l'effet "oscar" de cette page:
http://epicadesign.fr/demos/HoverEffectImg/index.html
J'ai regardé le code css mais je n'identifie pas le cadre. Quelqu'un pourrait me dire de quelles lignes il s'agit?
merci
canvas
J'aimerai ajouter un cadre qui apparaît sur une image au survol de la souris comme présenté sur l'effet "oscar" de cette page:
http://epicadesign.fr/demos/HoverEffectImg/index.html
J'ai regardé le code css mais je n'identifie pas le cadre. Quelqu'un pourrait me dire de quelles lignes il s'agit?
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}
<config>Windows / Firefox 54.0</config>
merci
canvas
A voir également:
- Ajout cadre sur image au survol de la souris
- Quelle touche pour débloquer la souris ? - 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 Graphisme
- Comment faire un cadre sur word - Guide
- Image iso - Guide
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image d’ours polaire sur une image de plage. retrouvez l'image originale de la plage. que cache l'ours polaire ? - Forum Graphisme
1 réponse
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