Example of a Flip Menu. Clickable/Responsive/Pure CSS|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        font: 14px Helvetica, Arial, serif;
      }
      .title {
        text-align: center;
        color: #333;
        font-size: 1.6em;
      }
      .flip-menu {
        margin: 30px 0 0;
        display: flex;
        flex-wrap: wrap;
        gap:10px;
      }
      .flip-item-wrap {
        width: 25%;
        height: auto;
        overflow: hidden;
        float: left;
        position: relative;
        -webkit-perspective: 800px;
        -moz-perspective: 800px;
        -ms-perspective: 800px;
        -o-perspective: 800px;
        perspective: 800px;
      }
      @media screen and (min-width: 1280px) {
        .flip-item-wrap {
          width: 16.6%;
        }
      }
      @media screen and (max-width: 979px) {
        .flip-item-wrap {
          width: 32%;
        }
      }
      @media screen and (max-width: 639px) {
        .flip-item-wrap {
          width: 48%;
        }
      }
      @media screen and (max-width: 379px) {
        .flip-item-wrap {
          width: 100%;
        }
      }
      .flip-item-wrap img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
      }
      .flip-item-wrap input {
        display: none;
      }
      .flip-item-wrap .fake-image {
        visibility: hidden;
      }
      .flip-item {
        display: block;
        width: 100%;
        height: 100%;
        float: left;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        color: #fff;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 1s;
        -moz-transition: -moz-transform 1s;
        -o-transition: -o-transform 1s;
        transition: transform 1s;
      }
      .flip-item figure {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
      }
      .flip-item .back {
        width: 100%;
        display: block;
        margin: 0;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
      }
      .flipper:checked + .flip-item {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
      }
      .flip-item-desc {
        background: rgba(0, 0, 0, 0.2);
        width: 90%;
        height: 90%;
        padding: 5%;
        position: absolute;
        top: 0;
        left: 0;
        text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9);
        overflow: hidden;
      }
      .flip-item-title {
        font-size: 1.5em;
        margin: 0.5em 0 0;
      }
    </style>
  </head>
  <body>
    <h1 class="title">Flip Menu. Clickable/Responsive/Pure CSS</h1>
    <div class="flip-menu">
      <section class="flip-item-wrap">
        <img class="fake-image" src="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Fruits">
        
        <input type="checkbox" class="flipper" id="a">
        <label for="a" class="flip-item">
          <figure class="front">
            <img src="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Menu item one front side">
          </figure>
          <figure class="back">
            <img src="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Menu item one back side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Menu Item second image">
        
        <input type="checkbox" class="flipper" id="b">
        <label for="b" class="flip-item">
          <figure class="front">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/18dfcef6d88dc2802e6eb659eb08c96a04b3a5fd.jpg" alt="Menu item second front side">
          </figure>
          <figure class="back">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/18dfcef6d88dc2802e6eb659eb08c96a04b3a5fd.jpg" alt="Menu item second back side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Menu Item third image">
        
        <input type="checkbox" class="flipper" id="c">
        <label for="c" class="flip-item">
          <figure class="front">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/97f03397c49144e3157d532c42187ed720f4c155.jpg" alt="Menu item third  front side">
          </figure>
          <figure class="back">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/97f03397c49144e3157d532c42187ed720f4c155.jpg" alt="Menu item third  back side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Menu Item fourth image ">
        
        <input type="checkbox" class="flipper" id="d">
        <label for="d" class="flip-item">
          <figure class="front">
            <img src="https://w3docs.com/uploads/media/default/0001/05/6efd432225863b7fb44cfe2c38e93e6485e4a239.jpg" alt="Menu Item fourth front side">
          </figure>
          <figure class="back">
            <img src="https://w3docs.com/uploads/media/default/0001/05/6efd432225863b7fb44cfe2c38e93e6485e4a239.jpg" alt="Menu Item fourth back side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt=" Menu Item fifth image ">
        
        <input type="checkbox" class="flipper" id="e">
        <label for="e" class="flip-item">
          <figure class="front">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/b94edc838cbdd00508e5aa1d1209717d2f0526ec.jpg" alt="Menu Item fifth front side">
          </figure>
          <figure class="back">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/b94edc838cbdd00508e5aa1d1209717d2f0526ec.jpg" alt="Menu Item fifth back  side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt=" Menu Item sixth image ">
        
        <input type="checkbox" class="flipper" id="f">
        <label for="f" class="flip-item">
          <figure class="front">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/1e319abea7d517608b9d4418665d10d8a4b2e29e.jpg" alt="Menu Item sixth front side">
          </figure>
          <figure class="back">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/1e319abea7d517608b9d4418665d10d8a4b2e29e.jpg" alt="Menu Item sixth back side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
    </div>
  </body>
</html>