An example of flipping hexagon lists which also has a “Read more” button on the backside|What is Lorem Ipsum?|CSS|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <title>Title of the document</title>
    <style>
      #hexagons {
        max-width: 893px;
        margin: 1em auto 16em;
        font: normal 16px/20px Helvetica, Arial, sans-serif;
        padding-top: 4em;
        position: relative;
      }
      #categories {
        overflow: hidden;
        width: 100%;
      }
      .clr:after {
        content: "";
        display: block;
        clear: both;
      }
      #categories li {
        position: relative;
        list-style-type: none;
        width: 32.33333333%;/* = (100- 3) / 3 */
        padding-bottom: 37.33641263%;/* =  width /0.866 */
        float: left;
        overflow: hidden;
        visibility: hidden;
        margin-left: 0.5%;
        margin-right: 0.5%;
        -webkit-transform: rotate(-60deg) skewY(30deg);
        -ms-transform: rotate(-60deg) skewY(30deg);
        transform: rotate(-60deg) skewY(30deg);
        cursor: pointer;
      }
      @media (min-width: 768px) {
        #categories li:nth-child(5n+4) {
          margin-left: 1%;
        }
        #categories li:nth-child(5n+4),
        #categories li:nth-child(5n+5) {
          margin-top: -8.083333333%; /* = w / 4 */
          margin-bottom: -8.083333333%; /* = w / 4 */
          -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
          -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
          transform: translateX(50%) rotate(-60deg) skewY(30deg);
        }
        #categories li:nth-child(5n+6) {
          clear: left;
          transform: translateX(0) rotate(-60deg) skewY(30deg);
        }
        #categories li:nth-child(5n+4):last-child,
        #categories li:nth-child(5n+5):last-child {
          margin-bottom: 0%;
        }
      }
      @media( max-width: 767px) {
        #categories li {
          width: 48.75%;/* = (100 -2.5) / 2 */
          padding-bottom: 56.29330254%;/* =  width /0.866 */
        }
        #categories li:nth-child(3n+3) {
          margin-left: 25.5%;
          clear: both;
          margin-top: -12.1875%;/* = w / 4 */
          margin-bottom: -12.1875%;/* = w / 4 */
        }
        #categories li:nth-child(3n+2) {
          float: right;
        }
        #categories li:nth-child(3n+3):last-child {
          margin-bottom: 0%;
        }
        #categories li:nth-child(3n+4) {
          clear: left;
          transform: translateX(0) rotate(-60deg) skewY(30deg);
        }
      }
      #categories li * {
        position: absolute;
        visibility: visible;
        overflow: hidden;
      }
      #categories li>div {
        width: 100%;
        height: 100%;
        text-align: center;
        color: #fff;
        overflow: hidden;
        -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
        transform: skewY(-30deg) rotate(60deg);
        -webkit-backface-visibility: hidden;
      }
      /* HEX CONTENT */
      #categories li img {
        left: 50%;
        top: 50%;
        width: auto;
        margin: 0 auto;
        transform: translate(-50%, -50%);
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
      }
      #categories li .flip-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #000;
        text-align: center;
        width: 100%;
        padding: 20px 3px;
      }
      #categories li .front .flip-content {
        font-size: 21px;
      }
      #categories li .flip-content * {
        position: static;
      }
      #categories li .flip-content {
        font-size: 19px;
        line-height: 1.2;
      }
      #categories li .front {
        background-repeat: repeat;
        background-position: center;
      }
      #categories li .flip-content p {
        color: #666666;
        padding-bottom: 10px;
      }
      #categories li .flip-content.lg {
        font-size: 27px;
      }
      #categories li .flip-content.md {
        font-size: 24px;
      }
      #categories li .flip-content.title-xs {
        font-size: 38px;
      }
      #categories li .front .flip-content,
      #categories li .front .flip-content p {
        color: #fff;
      }
      #categories li .flip-content p:last-child {
        padding-bottom: 0;
      }
      #categories li .back .flip-content p a {
        background: #df5d53;
        display: inline-block;
        -webkit-border-radius: 18px;
        -moz-border-radius: 18px;
        border-radius: 18px;
        color: #fff;
        text-transform: uppercase;
        padding: 4px 6px 4px 11px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
      }
      #categories li .back .flip-content p a i {
        font-size: 21px;
        vertical-align: middle;
        padding-left: 3px;
      }
      @media (max-width: 1024px) {
        #news-month.style2 {
          overflow: hidden;
        }
        #hexagons {
          margin-bottom: 15em;
        }
      }
      @media (max-width: 991px) {
        #categories li .front .flip-content.title-xs {
          font-size: 29px;
        }
        #categories li .front .flip-content {
          font-size: 17px;
        }
        #categories li .flip-content.lg {
          font-size: 22px;
        }
        #categories li .flip-content.md {
          font-size: 18px;
        }
        #categories li .flip-content {
          font-size: 16px;
        }
        .initiative.style2 .initiative--title {
          font-size: 19px;
        }
        #hexagons {
          overflow: hidden;
          margin: 1em auto 0;
          padding-top: 3em;
          padding-bottom: 3em;
        }
        #categories {
          width: auto;
          padding: 0 12px;
        }
        #hexagons .el-bg.bg-11 {
          top: 996px;
        }
        #hexagons .el-bg.bg-12 {
          top: 1152px;
        }
        .page-template-our-impact .header {
          max-height: none;
        }
      }
      @media (max-width: 767px) {
        #categories li .front .flip-content.title-xs {
          font-size: 32px;
        }
        #categories li .front .flip-content {
          font-size: 23px;
        }
        #categories li .flip-content.lg {
          font-size: 27px;
        }
        #categories li .flip-content.md {
          font-size: 26px;
        }
        #categories li .flip-content {
          font-size: 23px;
        }
        #hexagons .el-bg.bg-14 {
          top: 1751px;
        }
        #categories li img {
          height: 100%;
        }
        .initiative.style2 a {
          padding-bottom: 20px;
          padding-top: 10px;
        }
        #news-month.style2 .news-figure {
          background-position: 0 0;
          padding: 20px 16px 20px;
        }
        .initiative.style2 {
          padding-top: 20px;
          padding-bottom: 20px;
        }
        .page-template-our-impact .header {
          background-position: -62px;
        }
      }
      @media (max-width: 560px) {
        #categories li .front .flip-content.title-xs {
          font-size: 22px;
        }
        #categories li .front .flip-content {
          font-size: 13px;
        }
        #categories li .flip-content.lg {
          font-size: 17px;
        }
        #categories li .flip-content.md {
          font-size: 16px;
        }
        #categories li .flip-content {
          font-size: 13px;
        }
        #categories {
          padding: 0 8px;
        }
        #categories li .back .flip-content p a {
          font-size: 11px;
          padding: 0px 6px 0px 11px;
        }
        #categories li .back .flip-content p a i {
          font-size: 15px;
          line-height: 1.5;
        }
      }
      @media( max-width: 375px) {
        .page-template-our-impact .header {
          background-position: -87px;
        }
      }
      @media (max-width: 320px) {
        #categories li .front .flip-content.title-xs {
          font-size: 19px;
        }
        #categories li .front .flip-content {
          font-size: 12px;
        }
        #categories li .flip-content.lg {
          font-size: 13px;
        }
        #categories li .flip-content.md {
          font-size: 12px;
        }
        #categories li .flip-content {
          font-size: 11px;
        }
        #categories li .flip-content p {
          padding-bottom: 5px;
        }
        .page-template-our-impact .header {
          background-position: -104px;
        }
      }
      /* Flip EFFECT  */
      .flip-container {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -ms-perspective: 1000;
        perspective: 1000;
        -ms-transform: perspective(1000px);
        -moz-transform: perspective(1000px);
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
      }
      /*  UPDATED! flip the pane when hovered */
      .flip-container:hover {}
      .flip-container:hover .back {
        transform: rotateY(0deg);
      }
      .flip-container:hover .front {
        transform: rotateY(180deg);
      }
      .flip-container,
      .front,
      .back {
        width: 100%;
        height: 100%;
      }
      /* flip speed goes here */
      .flipper {
        width: 100%;
        height: 100%;
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;
        -ms-transition: 0.6s;
        -moz-transition: 0.6s;
        -moz-transform: perspective(1000px);
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transition: 0.6s;
        transform-style: preserve-3d;
        position: relative!important;
      }
      /* hide back of pane during swap */
      .front,
      .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;
        -webkit-transform: rotateY(0deg);
        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;
        -moz-transform: rotateY(0deg);
        -o-transition: 0.6s;
        -o-transform-style: preserve-3d;
        -o-transform: rotateY(0deg);
        -ms-transition: 0.6s;
        -ms-transform-style: preserve-3d;
        -ms-transform: rotateY(0deg);
        transition: 0.6s;
        transform-style: preserve-3d;
        transform: rotateY(0deg);
        position: absolute;
        top: 0;
        left: 0;
      }
      /*  UPDATED! front pane, placed above back */
      .front {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        z-index: 2;
      }
      /* back, initially hidden pane */
      .back {
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        background: #eeeeee;
      }
    </style>
  </head>
  <body>
    <div id="hexagons">
      <ul id="categories" class="clr">
        <li>
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front" style="background-color: #1c87c9;">
              </div>
              <div class="back">
                <div class="flip-content">
                  <p>"Lorem Ipsum is
                    <br/>simply dummy text
                    <br/>of the printing
                    <br/>and typesetting
                    <br/>industry."
                  </p>
                  <p>
                    <a href="#">read more <i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front" style="background-color: #ff6347;">
                <div class="flip-content title-xs">
                  <p>"What is
                    <br>Lorem
                    <br>Ipsum?"</p>
                </div>
              </div>
              <div class="back">
                <div class="flip-content">
                  <p>"Lorem Ipsum is
                    <br/>simply dummy text
                    <br/>of the printing
                    <br/>and typesetting
                    <br/>industry."
                  </p>
                  <p>
                    <a href="#">read more <i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front" style="background-color: #8ebf42;">
              </div>
              <div class="back">
                <div class="flip-content lg">
                  <p>"Lorem Ipsum is
                    <br/>simply dummy text
                    <br/>of the printing
                    <br/>and typesetting
                    <br/>industry."
                  </p>
                  <p>
                    <a href="#">read more <i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front">
                <img src="https://www.w3docs.com//uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg" alt="fruits" />
              </div>
              <div class="back">
                <div class="flip-content md">
                  <p>"Lorem Ipsum is
                    <br/>simply dummy text
                    <br/>of the printing
                    <br/>and typesetting
                    <br/>industry."
                  </p>
                  <p>
                    <a href="#">read more <i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front" style="background-color: #ffcc00;">
              </div>
              <div class="back">
                <div class="flip-content lg">
                  <p>"Lorem Ipsum is
                    <br/>simply dummy text
                    <br/>of the printing
                    <br/>and typesetting
                    <br/>industry."
                  </p>
                  <p>
                    <a href="#">read more <i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
      </ul>
    </div>
  </body>
</html>