Bonjour,

J'ai modifié un code afin de l'adapter à mon site mais je ne parviens pas à remonter le texte dans le carré de l'effet hover. J'ai fait plusieurs essais mais rien ne fonctionne. Pouvez vous m'aider?

Vous trouverez mon code: https://jsfiddle.net/ahtmcx3o/1/

après 2ème petite question au passage, on m'a dit que c'était mieux d'utiliser le % plutôt que le px pour les dimensions utilisées...

j'ai lu quelques articles mais je n'ai pas compris clairement les choses...

Pouvez vous me diriger?

Merci pour votre aide

Novis

Hello,

1) Tu veux remonter le texte entièrement(même taille de conteneur que "figure") ou juste qu'il soit dans le carré (peu importe sa taille) ?

2) Pour cette question, une petite recherche sur google t'aidera car c'est pas juste 'noir' ou 'blanc'

bonjour,

je souhaite juste qu'il soit dans le carré. j'ai réussi à modifier la taille de la vignette et du carré mais je n'arrive pas a mettre le texte dedans...

merci du coup de main

Re,

Change ce code:

figure.effect-ruby p{margin:1em 0 0;padding:3em;border:1px solid #000;text-align: center;width: 100px; height: 50px; display: block; opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,20px,0) scale(1.1);transform:translate3d(0,20px,0) scale(1.1)}

Par celui ci:

figure.effect-ruby p{border:1px solid #000;text-align: center;width: 200px; height: auto; display: block; opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,20px,0) scale(1.1);transform:translate3d(0,20px,0) scale(1.1)}

Indente ton code la prochaine fois

height: auto;

et moi j'avais mis la dimension exacte!! merci du conseil!!(je le saurai pour la prochaine fois!)

j'en apprend tous les jours, c'est cool!

novis

Non le "height:auto" c'était pour tester un truc, j'ai oublié de l'enlever Faut pas en tenir compte.

C'est ton "padding" lié à une dimension déjà bien large qui faisait que tu débordais !

Bonjour 4N42K1,

Alors pour être sûr d'avoir compris, j'ai effectué un test avec un autre effet pour me rendre compte. Et là,  j'ai réussi à bien cadrer le texte et modifier la taille des éléments mais c'est l'effet carré que je n'arrive pas à intégrer au bon endroit...

Pourrais-tu m'indiquer quel élément du code ne fonctionne pas. Pour le reste il semble que je commence à comprendre, c'est cool!

code visible: https://jsfiddle.net/qm857g6a/

html:

<div class="grid">
                    <figure class="effect-bubba">
                        <img src="" alt=""/>
                        <figcaption>
                            <h2>CONTACT</h2>
                            <p>Une question... Une suggestions... N'hésitez-pas... Je me ferai une joie de vous répondre..</p>
                            <a href="#"></a>
                        </figcaption>            
                    </figure>
                </div>

et css:

figure.effect-bubba{background:#f2e8f0 ; text-align:center; width: 200px; height: 200px;font-family: 'Raleway', sans-serif;
display: block; 
  vertical-align: middle;}
 figure.effect-bubba img{opacity:.7;-webkit-transition:opacity .35s;transition:opacity .35s}
 figure.effect-bubba:hover img{ opacity:.4}
 figure.effect-bubba figcaption::before,figure.effect-bubba figcaption::after{position:absolute;top:1px;right:1px;bottom:1px;left:1px;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
 figure.effect-bubba figcaption::before{width: 200px; height: 200px;border-top:1px solid #000;border-bottom:1px solid #000;-webkit-transform:scale(0,1);transform:scale(0,1)}
 figure.effect-bubba figcaption::after{width: 200px; height: 200px;border-right:1px solid #000;border-left:1px solid #000;-webkit-transform:scale(1,0);transform:scale(1,0)}
 figure.effect-bubba h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
  figure.effect-bubba p{border:1px ;text-align: center;width: 200px;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
 figure.effect-bubba:hover figcaption::before,figure.effect-bubba:hover figcaption::after{width: 200px; height: 200px;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
 figure.effect-bubba:hover h2,figure.effect-bubba:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

j'étais content d'avoir réussi (et compris) comment cadrer le texte et là... je redescends... (lol) je n'ai pas encore tout saisi...

Merci de votre aide

novis

Hello

Ajoute un 

position: relative;

à 

figure.effect-bubba

position: relative;

permet de cadrer un élément par rapport à un autre élément afin qu'ils soient en concordances.

Et donc en regardant de nouveau https://jsfiddle.net/qm857g6a/1/ on peut voir que le mot "contact" apparait en 1er hors de la vignette. Donc si on applique la position relative à ce mot, celui-ci sera intégré à la vignette? est-ce bien ça?

Je vais de ce pas faire le test (si vous avez des conseils, je suis preneur!)

novis

ha non, rien à voir...

j'ai modifié le 20px par 5px et là tout est cadré!

-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)

et

webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)

comme quoi je commence à comprendre petit à petit !)

Par contre en ajoutant une image... https://jsfiddle.net/qm857g6a/2/  tout est chamboulé!! Et c'est au moment où on croit avoir compris que tout et remis en question...

Si vous pouviez m'éclairer ce serait cool!

merci beaucoup

-
Edité par NovisCanvas 8 septembre 2017 à 13:56:08

C'est normal que tout est chamboulé avec l'ajout d'une image !

L'image à un comportement de type "inline-block", ce qui tu mets par à la suite de l'image (texte par exemple) ira sur son côté droit.

Sauf qu'ici tu fais appel à "figcaption" qui par défaut place le texte en dessous de l'image...

A toi de placer par défaut le texte par rapport au conteneur parent

Oui j'ai réussi! Merci beaucoup!

en ajoutant une position absolute et relative au bon endroit et tout était ok

par contre je viens uste de me rendre compte d'un truc plutôt ennuyeux... si vous bouger la souris un peu en dessous de l image alors celle ci met en route l effet hover!! pourquoi ça? là je sèche, je ne comprends pas trop cet effet en décalage...

regardez bien, faites glisser votre souris sous l'image, vous verrez, l 'effet se met en action!! https://jsfiddle.net/qm857g6a/5/

comment supprimer cela?

merci de votre aide

novis

-
Edité par NovisCanvas 8 septembre 2017 à 16:21:29