[Résolu] CSS - Effet dynamique sur image
3 participants
Page 1 sur 1
[Résolu] CSS - Effet dynamique sur image
Bonsoir,
Je suis ravie. J'ai touvé sur ce site la parfaite solution pour enlever des flèches nécessaires mais disgracieuses sur une image.
J'ai déjà pu paramétrer quelques valeurs.
Toutefois, le texte de l'onglet est actuellement justifié à gauche... Je souhaiterais qu'il soit centré. Que dois-je ajouter, et où dois-je l'ajouter dans .imagepluscontainer div.desc ?
Voici mon code dans son état actuel :
Enfin, que veut dire imagepluscontainer div.desc a{color: white;} ? Je ne vois rien de blanc.
Merci par avance,
Solie
Je suis ravie. J'ai touvé sur ce site la parfaite solution pour enlever des flèches nécessaires mais disgracieuses sur une image.
J'ai déjà pu paramétrer quelques valeurs.
Toutefois, le texte de l'onglet est actuellement justifié à gauche... Je souhaiterais qu'il soit centré. Que dois-je ajouter, et où dois-je l'ajouter dans .imagepluscontainer div.desc ?
Voici mon code dans son état actuel :
- Code:
<style type="text/css">
/*<![CDATA[*/
/* image zoom avec texte au passage de la souris */
.imagepluscontainer{ /* conteneur principal d'image */position: relative;z-index: 1;}
.imagepluscontainer img{ /* CSS pour l'image dans le conteneur */position: relative;z-index: 2;-moz-transition: all 0.5s ease; /* Permet la transition CSS3 sur tous les appuis verticaux */-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.imagepluscontainer:hover img{ /* CSS pour l'image quand la souris passe au-dessus du contenu principal */-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-moz-transform: scale(1.05, 1.05);-webkit-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);}
.imagepluscontainer div.desc{ /* CSS pour la division de descente de chaque image. */position: absolute;width: 90%;z-index: 1; /* Placez le z-index à égalité avec l'image, ainsi elle est cachée sous elle */bottom: 0; /* La position de défaut de la division de descente est le fond du conteneur, et glissent ainsi jusqu'au bas */left: 5px;padding: 8px;background: rgba(0, 0, 0, 0.75); /* noir background avec 75% d'opacité */color: #8D8D8D;-moz-border-radius: 0 0 8px 8px; /* CSS3 angles arrondis */-webkit-border-radius: 0 0 8px 8px;border-radius: 0 0 8px 8px;opacity: 0; /* Set initial opacity to 0 */-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 ombres */-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);-moz-transition: all 0.5s ease 0.5s; /* Permet la transition CSS3 sur la division de descente. La valeur 0.5s finale est le retard avant que l'animation commence */-webkit-transition: all 0.5s ease 0.5s;-o-transition: all 0.5s ease 0.5s;-ms-transition: all 0.5s ease 0.5s;transition: all 0.5s ease 0.5s;}
.imagepluscontainer div.desc a{color: white;}
.imagepluscontainer:hover div.desc{ /* CSS pour la division de descente quand la souris passe au-dessus du conteneur principal */-moz-transform: translate(0, 100%);-webkit-transform: translate(0, 100%);-ms-transform: translate(0, 100%);-o-transform: translate(0, 100%);transform: translate(0, 100%);opacity:1; /* Reveal desc DIV fully */}/*]]>*/
</style>
Enfin, que veut dire imagepluscontainer div.desc a{color: white;} ? Je ne vois rien de blanc.
Merci par avance,
Solie
Dernière édition par Solie le Jeu 10 Sep 2015 - 20:53, édité 2 fois (Raison : ajout de la balise Résolu)
Re: [Résolu] CSS - Effet dynamique sur image
Bonsoir Solie,
.imagepluscontainer div.desc a{color: white;} signifie tout simplement que les liens dans l'élément div avec pour class "desc" (le fameux texte qui s'affiche au survol de l'image) sont blancs (mais actuellement tu n'as que du texte "Sélectionnez ci-dessous la spécialité recherchée").
Sinon pour centrer ce texte c'est :
Bonne soirée
.imagepluscontainer div.desc a{color: white;} signifie tout simplement que les liens dans l'élément div avec pour class "desc" (le fameux texte qui s'affiche au survol de l'image) sont blancs (mais actuellement tu n'as que du texte "Sélectionnez ci-dessous la spécialité recherchée").
Sinon pour centrer ce texte c'est :
- Code:
.imagepluscontainer div.desc {
text-align: center;
}
Bonne soirée
Re: [Résolu] CSS - Effet dynamique sur image
Merci beaucoup de tes explications, Florian.
C'est bien centré, et installé ici et là.
Bon week-end !
C'est bien centré, et installé ici et là.
Bon week-end !
Re: [Résolu] CSS - Effet dynamique sur image
Bonsoir,
J'avais mis la balise résolu mais j'ai remarqué plus tard qu'il y avait un souci dans les proportions des images intégrées. Si en version standard tout semble OK, en version mobile c'est un peu la cata...
Pour rappel, voici le code que j'ai mis dans le head :
Et voici celui qui se trouve depuis le 07 août dans le Widget/HTML :
J'avais mis le width et le height sur 100% (sans trop savoir s'il le fallait) pour que l'image s'adapte à la largeur du content, peu importe la taille d'écran. Mais voilà, sur mobile, ça déborde grave.
L'adresse de l'image au mois d'août était :
http://image.jimcdn.com/app/cms/image/transf/dimension=941x10000;mode=fitin;format=jpg/path/sc222fcd30ab1fe50/image/idd4cd0e98feb4744/version/1438978663/image.jpg
Aujourd'hui, lorsque je fais un clic-droit sur l'image en page cachée, c'est une adresse https :
https://image.jimcdn.com/app/cms/image/transf/dimension=640x10000:format=jpg/path/sc222fcd30ab1fe50/image/idd4cd0e98feb4744/version/1446379017/image.jpg
Si j'édite le code Widget/HTML avec cette nouvelle adresse de Jimdo, c'est pire... L'image est carrément plus étroite que le content.
Je cherche, je ne comprends pas comment intégrer l'image pour qu'elle s'adapte sur tout écran à son contenant
J'avais mis la balise résolu mais j'ai remarqué plus tard qu'il y avait un souci dans les proportions des images intégrées. Si en version standard tout semble OK, en version mobile c'est un peu la cata...
Pour rappel, voici le code que j'ai mis dans le head :
- Code:
<style type="text/css">
/*<![CDATA[*/
/* image zoom avec texte au passage de la souris */
.imagepluscontainer{ /* conteneur principal d'image */position: relative;z-index: 1;}
.imagepluscontainer img{ /* CSS pour l'image dans le conteneur */position: relative;z-index: 2;-moz-transition: all 0.5s ease; /* Permet la transition CSS3 sur tous les appuis verticaux */-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.imagepluscontainer:hover img{ /* CSS pour l'image quand la souris passe au-dessus du contenu principal */-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-moz-transform: scale(1.05, 1.05);-webkit-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);}
.imagepluscontainer div.desc{ /* CSS pour la division de descente de chaque image. */position: absolute;width: 90%;z-index: 1; /* Placez le z-index à égalité avec l'image, ainsi elle est cachée sous elle */bottom: 0; /* La position de défaut de la division de descente est le fond du conteneur, et glissent ainsi jusqu'au bas */left: 35px;padding: 8px;background: rgba(0, 0, 0, 0.6); /* noir background avec 60% d'opacité */color: #8D8D8D;text-align: center;-moz-border-radius: 0 0 0px 0px; /* CSS3 angles arrondis */-webkit-border-radius: 0 0 0px 0px;border-radius: 0 0 0px 0px;opacity: 0; /* Set initial opacity to 0 */-moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.95); /* CSS3 ombres */-webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.95);box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.95);-moz-transition: all 0.5s ease 0.5s; /* Permet la transition CSS3 sur la division de descente. La valeur 0.5s finale est le retard avant que l'animation commence */-webkit-transition: all 0.5s ease 0.5s;-o-transition: all 0.5s ease 0.5s;-ms-transition: all 0.5s ease 0.5s;transition: all 0.5s ease 0.5s;}
.imagepluscontainer div.desc a{color: white;}
.imagepluscontainer:hover div.desc{ /* CSS pour la division de descente quand la souris passe au-dessus du conteneur principal */-moz-transform: translate(0, 100%);-webkit-transform: translate(0, 100%);-ms-transform: translate(0, 100%);-o-transform: translate(0, 100%);transform: translate(0, 100%);opacity:1; /* Reveal desc DIV fully */}/*]]>*/
</style>
Et voici celui qui se trouve depuis le 07 août dans le Widget/HTML :
- Code:
<div class="imagepluscontainer" style="width:100%; height:100%; z-index:2"> <img src="http://image.jimcdn.com/app/cms/image/transf/dimension=941x10000;mode=fitin;format=jpg/path/sc222fcd30ab1fe50/image/idd4cd0e98feb4744/version/1438978663/image.jpg" alt="" /> <div class="desc"> Sélectionnez ci-dessous la spécialité pub recherchée </div></div>
J'avais mis le width et le height sur 100% (sans trop savoir s'il le fallait) pour que l'image s'adapte à la largeur du content, peu importe la taille d'écran. Mais voilà, sur mobile, ça déborde grave.
L'adresse de l'image au mois d'août était :
http://image.jimcdn.com/app/cms/image/transf/dimension=941x10000;mode=fitin;format=jpg/path/sc222fcd30ab1fe50/image/idd4cd0e98feb4744/version/1438978663/image.jpg
Aujourd'hui, lorsque je fais un clic-droit sur l'image en page cachée, c'est une adresse https :
https://image.jimcdn.com/app/cms/image/transf/dimension=640x10000:format=jpg/path/sc222fcd30ab1fe50/image/idd4cd0e98feb4744/version/1446379017/image.jpg
Si j'édite le code Widget/HTML avec cette nouvelle adresse de Jimdo, c'est pire... L'image est carrément plus étroite que le content.
Je cherche, je ne comprends pas comment intégrer l'image pour qu'elle s'adapte sur tout écran à son contenant
Re: [Résolu] CSS - Effet dynamique sur image
L'image n'a pas de width/height spécifié, dans un contenant qui autorise le dépassement (overflow)
Donne une width de 100% à ton image en passant par sa class
.imagepluscontainer img{width 100%}
Il faudra bidouiller aussi pour le texte du haut qui passe sous l'image du bas…
Donne une width de 100% à ton image en passant par sa class
.imagepluscontainer img{width 100%}
Il faudra bidouiller aussi pour le texte du haut qui passe sous l'image du bas…
Re: [Résolu] CSS - Effet dynamique sur image
Pourquoi deux fois le même bandeau sur cette page ?
http://www.voixoff.com/voix-off-publicite/?mobile=1
http://www.voixoff.com/voix-off-publicite/?mobile=1
Re: [Résolu] CSS - Effet dynamique sur image
C'est parce que je continue de batailler. J'ai copié l'élément, et je profite de la nuit pour faire des tentatives avec l'image du bas. Je vais l'enlever après. Pas de soucis pour le texte, la galerie en dessous ne le masquera pas.
J'ai mis dans le head :
Edit : Avec deux points, ça le fait très bien !
Merci FredVig tu déchires
J'ai mis dans le head :
- Code:
<style type="text/css">
/*<![CDATA[*/
.imagepluscontainer img{width 100%}
/*]]>*/
</style>
Edit : Avec deux points, ça le fait très bien !
Merci FredVig tu déchires
Sujets similaires
» effet rollover avec titre sur galerie d'image
» effet rollover - remplacer une image par une autre ne fonctionne plus
» Image de fond n'apparaît pas sur tablet (bug Ipad résolu)
» [Résolu] Fond blanc avant l'image d'arrière-plan
» [Résolu] Besoin d'aide pour rendre une "image map" responsive
» effet rollover - remplacer une image par une autre ne fonctionne plus
» Image de fond n'apparaît pas sur tablet (bug Ipad résolu)
» [Résolu] Fond blanc avant l'image d'arrière-plan
» [Résolu] Besoin d'aide pour rendre une "image map" responsive
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|