Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

[Résolu] CSS - Effet dynamique sur image

Voir le sujet précédent Voir le sujet suivant Aller en bas

[Résolu] CSS - Effet dynamique sur image

Message par Solie le Ven 7 Aoû 2015 - 20:46

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 :
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)
avatar
Solie

Messages : 513
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] CSS - Effet dynamique sur image

Message par ZeTuto le Ven 7 Aoû 2015 - 21:55

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 :
Code:
.imagepluscontainer div.desc {
  text-align: center;
}

Bonne soirée
avatar
ZeTuto

Messages : 203
Date d'inscription : 08/10/2014

http://www.zetuto.com

Revenir en haut Aller en bas

Re: [Résolu] CSS - Effet dynamique sur image

Message par Solie le Sam 8 Aoû 2015 - 1:15

Merci beaucoup de tes explications, Florian.

C'est bien centré, et installé ici et là.

sunny Bon week-end !
avatar
Solie

Messages : 513
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] CSS - Effet dynamique sur image

Message par Solie le Mar 1 Déc 2015 - 23:33

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 :
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 Sad
avatar
Solie

Messages : 513
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] CSS - Effet dynamique sur image

Message par FredVig le Mer 2 Déc 2015 - 0:48

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…

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1794
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] CSS - Effet dynamique sur image

Message par FredVig le Mer 2 Déc 2015 - 0:53

Pourquoi deux fois le même bandeau sur cette page ?
http://www.voixoff.com/voix-off-publicite/?mobile=1

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1794
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] CSS - Effet dynamique sur image

Message par Solie le Mer 2 Déc 2015 - 1:12

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 :
Code:
<style type="text/css">
/*<![CDATA[*/
.imagepluscontainer img{width 100%}
/*]]>*/
</style>
mais ça n'agit pas.


Edit : Avec deux points, ça le fait très bien !
      Merci FredVig king   tu déchires cheers
avatar
Solie

Messages : 513
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] CSS - Effet dynamique sur image

Message par FredVig le Mer 2 Déc 2015 - 10:00

ha mince oui, je ne sais pas pourquoi les : ont sauté ?

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1794
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] CSS - Effet dynamique sur image

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum