Partage
  • Partager sur Facebook
  • Partager sur Twitter

affichage div en dehors d'un wrap

    23 septembre 2021 à 7:35:29

    Bonjour à tous,

    j'aimerais apporter une modification au niveau du css de ce code :

    <html>
      <head>
        <style>
        body,html{margin:0;padding:0;height:100%;}
        body{background:#E3DFD2;box-shadow: inset 0 0 20vmin 0 #585247;}
        .wrap{
          position:relative;
          width:80vmin; height:80vmin;
          margin:0 auto;
          background:inherit;
          transform:scale(0.2) translatez(0px);
          opacity:0;
          transition:transform .5s, opacity .5s;
        }
        a{
          position:absolute;
          left:0; top:0;
          width:47.5%; height:47.5%;
          overflow:hidden;
          transform:scale(.5) translateZ(0px);
          background:#585247;
        }
        a div{
          height:100%;
          background-size:cover;
          opacity:.5;
          transition:opacity .5s;
          border-radius:inherit;
        }
        a:nth-child(1){
          border-radius:40vmin 0 0 0;
          transform-origin: 110% 110%;
          transition:transform .4s .15s;
        }
        a:nth-child(1) div{
          background-image:url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg');
        }
        a:nth-child(2){
          border-radius:0 40vmin 0 0;
          left:52.5%;
          transform-origin: -10% 110%;
          transition:transform .4s .2s;
        }
        a:nth-child(2) div{
          background-image:url('https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg');
        }
        a:nth-child(3){
          border-radius:0 0 0 40vmin;
          top:52.5%;
          transform-origin: 110% -10%;
          transition:transform .4s .25s;
        }
        a:nth-child(3) div{
          background-image:url('https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg');
        }
        a:nth-child(4){
          border-radius:0 0 40vmin 0;
          top:52.5%; left:52.5%;
          transform-origin: -10% -10%;
          transition:transform .4s .3s;
        }
        a:nth-child(4) div{
          background-image: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');
        }
        a:nth-child(5){
          width:55%;height:55%;
          left:22.5%; top:22.5%;
          border-radius:50vmin;
          box-shadow:0 0 0 5vmin #E3DFD2;
          transform:scale(1);
        }
        a:nth-child(5) div{
          background-image: url('https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg');
        }
        span{
          position:relative;
          display:block;
          margin:0 auto;
          top:45vmin;
          width:10vmin; height:10vmin;
          border-radius:100%;
          background:#585247;
          transform:translateZ(0px);
        }
        span span{
          position:absolute;
          width:60%;height:3px;
          background:#ACA696;
          left:20%; top:50%;
          border-radius:0;
        }
        span span:after, span span:before{
          content:'';
          position:absolute;
          left:0; top:-1.5vmin;
          width:100%; height:100%;
          background:inherit;
        }
        span span:after{
          top:1.5vmin;
        }
        span:hover + .wrap, .wrap:hover{
          transform:scale(.8) translateZ(0px);
          opacity:1;
        }
        span:hover + .wrap a, .wrap:hover a{
          transform:scale(1) translatez(0px);
        }
        a:hover div{
          opacity:1;
          transform:translatez(0px);
        }
        </style>
      </head>
      <body>
        <span><span></span></span>
        <div class="wrap">
          <a href="#"><div></div></a>
          <a href="#"><div></div></a>
          <a href="#"><div></div></a>
          <a href="#"><div></div></a>
          <a href="#"><div></div></a>
        </div>
      </body>
    </html>



    au survol de la souris sur le wrap, 4 volets s'ouvrent.

    ce que je voudrais faire c'est qu'une fois c'est 4 volets ouverts, au survol de la souris sur ceux-ci, un nouveau nouvel element div s'affiche en dehors du wrap.

    Pour être plus claire un affichage de volet en cascade.

    J'ai essayé plusieurs options, mais impossible pour moi de faire sortir un nouvel element en dehors de mon wrap 

    Voila l'idée

    .nouvelleDivEnDehorsDuWrap{
      width:200px;
      height:30px;
    }
    
    a div:hover .nouvelleDivEnDehorsDuWrap{
      margin-left:200px;
    }

    Merci par avance




    -
    Edité par metallicrider 23 septembre 2021 à 7:47:14

    • Partager sur Facebook
    • Partager sur Twitter
    Un bon site Web est toujours "en construction" !

    affichage div en dehors d'un wrap

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown