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.

Rejoignez le forum, c’est rapide et facile

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.
Communauté francophone - Jimdo
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -50%
Trottinette électrique OCEAN DRIVE A9 avec ...
Voir le deal
299.99 €

[Résolu] CSS - Effet dynamique sur image

3 participants

Aller en bas

[Résolu] CSS - Effet dynamique sur image Empty [Résolu] CSS - Effet dynamique sur image

Message par Solie 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)
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par ZeTuto 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
ZeTuto
ZeTuto

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

https://zetuto.jimdo.com

Revenir en haut Aller en bas

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

Message par Solie 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 !
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par Solie 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...

[Résolu] CSS - Effet dynamique sur image Image14

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
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig 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…
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par FredVig 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
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Solie 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
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

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

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

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

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