Bonjour,

Je fais des test avec edit fiddle afin de comprendre comment fonctionne le css etc...

Et donc pour le coup, j'ai travaillé avec l'effet romeo. https://jsfiddle.net/ttoopk5v/  Le problème est que je souhaiterai que la taille totale de la vignette fasse 200 x 200px . j'ai la bonne taille quand l'effet hover fonctionne mais pas quand la vignette est normale... Je ne comprends pas quel attribut ajouter afin qu'il y ai un effet hover mais que la vignette reste en 200x200px.

html:

<style>
@import url('https://fonts.googleapis.com/css?family=Raleway');
</style> <div class="grid">
                    <figure class="effect-romeo">
                        <img src="http://images/p/pur/purple-1741713-1920.jpg" alt=""/>
                        <figcaption>
                            <h2>CONTACT</h2>
                            <p>Une Question... Une suggestions... N'hésitez-pas... Je me ferai une joie de vous répondre...</p>
                        </figcaption>            
                    </figure>
                </div>

css:

figure.effect-romeo {position: relative;font-family: 'Raleway', sans-serif; width: 200px; height: 200px; Text-align: center;color: #000 }
figure.effect-romeo img{width: 200px; height: 200px;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale3d(1.4,1.4,1);transform:scale3d(1.4,1.4,1)}
 figure.effect-romeo:hover img{width: 200px; height: 200px;opacity:.6;-webkit-transform:scale3d(1,1,1);transform:translate3d(1,1,1)}
 figure.effect-romeo figcaption::before,figure.effect-romeo figcaption::after{position:absolute;top:50%;left:50%;width:80%;height:1px;background:#000;content:'';-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}
 figure.effect-romeo:hover figcaption::before{opacity:.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(45deg);transform:translate3d(-50%,-50%,0) rotate(45deg)}
 figure.effect-romeo:hover figcaption::after{opacity:.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(-45deg);transform:translate3d(-50%,-50%,0) rotate(-45deg)}
 figure.effect-romeo h2,figure.effect-romeo p{position:absolute;top:45%;left:0;width:100%;-webkit-transition:-webkit-transform .35s;transition:transform .35s}
 figure.effect-romeo h2{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-150%,0);transform:translate3d(0,-50%,0) translate3d(0,-150%,0)}
 figure.effect-romeo p{ figure.effect-romeo p{-webkit-transform:translate3d(0,-50%,0) translate3d(0,60%,0);transform:translate3d(0,-50%,0) translate3d(0,60%,0)}}
 figure.effect-romeo:hover h2{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-100%,0);transform:translate3d(0,-50%,0) translate3d(0,-100%,0)}
 figure.effect-romeo:hover p{-webkit-transform:translate3d(0,-100%,0) translate3d(0,100%,0);transform:translate3d(0,-100%,0) translate3d(0,110%,0)}

Merci de votre aide

Noviis

-
Edité par NovisCanvas 20 avril 2020 à 17:33:33