HTML :
<body class="home "> <!--Galerie--> <section class=" "> <div class="columns is-gapless is-mobile is-multiline"> <div class="column is-half-mobile is-half-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd un "> <a href="#"> <div class="opacit"> <h3 class="is-size-3 color-white font"> SOUS-TITRE</h3> <p class="cadre"> En savoir plus </p> </div> </a> </div> <div class="column is-half-mobile is-half-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd deux "> <a href="#"> <div class="opacit"> <h3 class="is-size-3 color-white font"> SOUS-TITRE</h3> <p class="cadre"> En savoir plus </p> </div> </a> </div> <div class="column is-half-mobile is-half-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd trois"> <a href="#"> <div class="opacit"> <h3 class="is-size-3 color-white font"> SOUS-TITRE</h3> <p class="cadre"> En savoir plus </p> </div> </a> </div> <div class="column is-half-mobile is-half-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd quatre "> <a href="#"> <div class="opacit"> <h3 class="is-size-3 color-white font"> SOUS-TITRE</h3> <p class="cadre"> En savoir plus </p> </div> </a> </div> <div class="column is-half-mobile is-half-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd quatre "> <a href="#"> <div class="opacit"> <h3 class="is-size-3 color-white font"> SOUS-TITRE</h3> <p class="cadre"> En savoir plus </p> </div> </a> </div> <div class="column is-half-mobile is-half-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd un "> <a href="#"> <div class="opacit"> <h3 class="is-size-3 color-white font"> SOUS-TITRE</h3> <p class="cadre"> En savoir plus </p> </div> </a> </div> <div class="column is-half-mobile is-half-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd deux "> <a href="#"> <div class="opacit"> <h3 class="is-size-3 color-white font"> SOUS-TITRE</h3> <p class="cadre"> En savoir plus </p> </div> </a> </div> <div class="column is-half-mobile is-half-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd trois"> <a href="#"> <div class="opacit"> <h3 class="is-size-3 color-white font"> SOUS-TITRE</h3> <p class="cadre"> En savoir plus </p> </div> </a> </div> </section> <!--Galerie--> </body>
CSS :
/*-------------------------------------------------------------- # Galerie --------------------------------------------------------------*/ .degrade { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.7) 70%, transparent 100%); text-align: center; padding: 1px 0; text-transform: uppercase; color: var(--main-text-color); margin: 0 20px; } .presentation { margin: 50px auto 150px 0; } .presentation .box:not(:last-child) { margin: 200px 0; } .un { background: #ccc; background-image: url(img/pluie.jpg); } .deux { background: #fff; background-image: url(img/soleil.jpg); } .trois { background: #ccc; background-image: url(img/pluie.jpg); } .quatre { background: #ccc; background-image: url(img/soleil.jpg); } .un, .deux, .trois, .quatre { color: var(--white); background-repeat: no-repeat; background-position: center center; background-size: 100%; transition: all 1s ease-in-out; font-size: 0.8em; } .un:hover, .trois:hover, .deux:hover, .quatre:hover { background-position: center center; background-size: 120%; } .opacit { opacity: 0; background-color: rgba(255, 255, 255, 0); padding: 100px 20px; text-align: center; height: 100%; margin: 0; transition: all 0.5s 0s ease; } .opacit:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.7); padding: 75px 20px 25px 20px; } .cadre { width: 0; height: 0; overflow: hidden; border: 1px solid #fff; margin: auto; font-size: 0em; transition: all 0.5s 0s ease; background: rgba(255, 255, 255, 0.7); height: 3em; line-height: 3em; white-space: nowrap; } .opacit:hover .cadre { width: 150px; height: 50px; font-size: 1em; margin: auto; } @media screen and (max-width: 1024px) { .opacit { opacity: 1; background-color: rgba(255, 255, 255, 0.1); } .opacit .cadre { width: 150px; height: 50px; font-size: 1em; margin: auto; } .opacit:hover { padding: 100px 20px; }