logo

Box 1

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;
  }