Html Question posted in
Some basic documentation can be found here.

Html – CSS Combinators based on class

I would like to show div.overlay-one if I hover over the "One" LI element or div.overlay-two if I hover over the "Two" LI element. Based on the CSS Combinators I couldn’t find a way to do this. I also tried to nest the overlays like:

<div class="overlay">
  <div class="overlay-one">
    Lorem ipsum dolor sit amet
  </div>
  <div class="overlay-two">
    Ut eget dapibus mauris.
  </div>
</div>


div.content:hover + div.overlay > .overlay-one {
    display: block;
    background-color: lime;
}
div.content:hover + div.overlay > .overlay-two {
    display: block;
    background-color: yellow;
}

but then always both get shown. Does anyone have an idea how to restructure or if there is a better usage of CSS selectors?

div.cutoff {
  position: relative;
  overflow: hidden;
  background-color: gray;
}
div.cutoff-before {
  height: 100px;
  width: 100%;
  background-color: gray;
  /* -webkit-clip-path: polygon(100% 100%, 100% 80%, 0 20%); */
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
div.content {
  background-color: gray;
}
div.cutoff-after {
  height: 100px;
  width: 100%;
  background-color: gray;
  /* -webkit-clip-path: polygon(0 0, 100% 0, 0 20%); */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
div.content:hover + div.overlay-one {
    display: block;
    background-color: lime;
}
div.content:hover + div.overlay-two {
    display: block;
    background-color: yellow;
}
div.overlay-one,
div.overlay-two {
  display: none;
  background-color: red;
  padding: 2rem;
}

ul {
   list-style: none;
   padding-inline-start: 0;
   margin-bottom: 0;
}
ul.row {
    margin-left: 0;
    margin-right: 0;
}
li {
    padding: 1rem;
    display: inline-block;
    background-color: gray;
}
li div.circle {
    background: lime;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: auto;
    display:flex;
    justify-content:center;
    align-items:center;
}
li i.icon {
    width: 64px;
    height: 64px;
    display: block;
    margin: auto;
}
li div.text {
    margin: auto;
    display:flex;
    justify-content:center;
    align-items:center;
}
ul:hover li:not(:hover) {
    filter: brightness(80%);
    transition: all 0.2s ease-in-out;
}
<div class="cutoff-before">
</div>
<div class="content">
  <ul class="row">
    <li class="col-4 myLi">
      <div class="circle circle-one">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>One</span>
      </div>
    </li>
    <li class="col-4 myLi">
      <div class="circle">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>Two</span>
      </div>
    </li>
    <li class="col-4">
      <div class="circle">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>Three</span>
      </div>
    </li>
    <li class="col-4">
      <div class="circle">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>Four</span>
      </div>
    </li>
    <li class="col-4">
      <div class="circle">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>Five</span>
      </div>
    </li>
    <li class="col-4">
      <div class="circle">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>Six</span>
      </div>
    </li>
  </ul>
</div>
<div class="content overlay-one">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna massa, aliquet id vehicula id, aliquam non dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at sollicitudin lorem, non suscipit urna. Aliquam eget nulla urna. Mauris ullamcorper sed tellus vel euismod. Proin blandit ipsum interdum, tempus mauris in, mattis felis. In et sollicitudin tellus. Maecenas orci nunc, feugiat et ultrices sit amet, hendrerit nec nibh. Nulla eu quam vel neque rhoncus tincidunt. Proin quis ligula at nulla aliquet dapibus vitae vel dolor. Vestibulum et metus eu orci molestie volutpat.
</div>
<div class="content overlay-two">
  Ut eget dapibus mauris. Nunc auctor rutrum vulputate. Nullam non lacinia nisi. Pellentesque tempor, magna sit amet tempor ultrices, mauris nisi mattis mauris, id egestas erat erat vitae nisl. Aenean tempor gravida ante. Phasellus lacus ipsum, pulvinar a condimentum in, interdum sed augue. Nullam blandit congue diam, sit amet vestibulum metus iaculis non. Vestibulum tempor arcu ut ligula rhoncus porta luctus in dui. Aliquam aliquet, elit vitae tristique mattis, risus dui laoreet nisl, id imperdiet felis nulla eget magna. Praesent et leo ultrices, ultrices justo placerat, fringilla nisl. Donec id consectetur ex. Nullam a fermentum turpis. Nulla facilisi.
</div>
<div class="cutoff-after">
</div>
Tags:

2

Answers


  1. 0

    Your code blocks are messed up. But looking at the 2nd code snippet, I think you want to show the corresponding div on the hover of the list icon. Here is how you can achieve that:

    body {
  margin: 0;
  padding: 0;
}

div.cutoff-before {
  height: 100px;
  width: 100%;
  background-color: gray;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

div.content {
  background-color: gray;
  position: relative;
  z-index: 1;
}

div.cutoff-after {
  height: 100px;
  width: 100%;
  background-color: gray;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

ul {
  list-style: none;
  padding-inline-start: 0;
  margin-bottom: 0;
}

ul.row {
  margin-left: 0;
  margin-right: 0;
}

li {
  padding: 1rem;
  display: inline-block;
  background-color: gray;
}

li div.circle {
  background: green;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
}

li i.icon {
  width: 64px;
  height: 64px;
  display: block;
  margin: auto;
}

li div.text {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-weight: bold;
}

div.overlay-one,
div.overlay-two {
  display: none;
  background-color: green;
  padding: 1rem;
  position: absolute;
  top: 100%;
  left: 0;
  width: 98vw;
  z-index: 2;
  border: 2px solid #3498db;
}

div.overlay-two {
  background-color: pink;
}

li:hover .overlay-one {
  display: block;
}

li:hover .overlay-two {
  display: block;
}

ul:hover li:not(:hover) {
  filter: brightness(80%);
  transition: all 0.2s ease-in-out;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Test</title>
  </head>

  <body>
    <div class="cutoff-before"></div>
    <div class="content">
      <ul class="row">
        <li class="col-4 myLi">
          <div class="circle circle-one">
            <i class="icon"
              ><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
                <path
                  d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0"
                /></svg
            ></i>
            <div class="overlay-one">
              <p
                >This is overlay-one content. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet atque quaerat eligendi ullam, distinctio et facilis. Vitae eaque praesentium, nisi quisquam reprehenderit est. Temporibus earum assumenda
                repudiandae animi iusto et tempora laboriosam aliquam iure delectus quas quia fugiat, at, voluptatem ab laborum culpa quis praesentium vel officia. Error, consequuntur ea!</p
              >
            </div>
          </div>
          <div class="text">
            <span>One</span>
          </div>
        </li>
        <li class="col-4 myLi">
          <div class="circle">
            <i class="icon"
              ><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
                <path
                  d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0"
                /></svg
            ></i>
            <div class="overlay-two">
              <p
                >This is overlay-two content. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet atque quaerat eligendi ullam, distinctio et facilis. Vitae eaque praesentium, nisi quisquam reprehenderit est. Temporibus earum assumenda
                repudiandae animi iusto et tempora laboriosam aliquam iure delectus quas quia fugiat, at, voluptatem ab laborum culpa quis praesentium vel officia. Error, consequuntur ea!</p
              >
            </div>
          </div>
          <div class="text">
            <span>Two</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="cutoff-after"></div>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    If the browsers you need to support implement CSS :has then you can keep the HTML structure you give and use :has to select if the nth li element is hovered then select the relevant text to show.

    .content:has(li:hover:nth-child(1))~div.overlay-one {
  display: block;
}

.content:has(li:hover:nth-child(2))~div.overlay-two {
  display: block;
}

div.cutoff {
  position: relative;
  overflow: hidden;
  background-color: gray;
}

div.cutoff-before {
  height: 100px;
  width: 100%;
  background-color: gray;
  /* -webkit-clip-path: polygon(100% 100%, 100% 80%, 0 20%); */
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

div.content {
  background-color: gray;
}

div.cutoff-after {
  height: 100px;
  width: 100%;
  background-color: gray;
  /* -webkit-clip-path: polygon(0 0, 100% 0, 0 20%); */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

rdiv.content:hover+div.overlay-one {
  display: block;
  background-color: lime;
}

rdiv.content:hover+div.overlay-two {
  display: block;
  background-color: yellow;
}

div.overlay-one,
div.overlay-two {
  display: none;
  background-color: red;
  padding: 2rem;
}

ul {
  list-style: none;
  padding-inline-start: 0;
  margin-bottom: 0;
}

ul.row {
  margin-left: 0;
  margin-right: 0;
}

li {
  padding: 1rem;
  display: inline-block;
  background-color: gray;
}

li div.circle {
  background: lime;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

li i.icon {
  width: 64px;
  height: 64px;
  display: block;
  margin: auto;
}

li div.text {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul:hover li:not(:hover) {
  filter: brightness(80%);
  transition: all 0.2s ease-in-out;
}
    <div class="cutoff-before">
</div>
<div class="content">
  <ul class="row">
    <li class="col-4 myLi">
      <div class="circle circle-one">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>One</span>
      </div>
    </li>
    <li class="col-4 myLi">
      <div class="circle">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>Two</span>
      </div>
    </li>
    <li class="col-4">
      <div class="circle">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>Three</span>
      </div>
    </li>
    <li class="col-4">
      <div class="circle">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>Four</span>
      </div>
    </li>
    <li class="col-4">
      <div class="circle">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>Five</span>
      </div>
    </li>
    <li class="col-4">
      <div class="circle">
        <i class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
            <path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
          </svg>
        </i>
      </div>
      <div class="text">
        <span>Six</span>
      </div>
    </li>
  </ul>
</div>
<div class="content overlay-one">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna massa, aliquet id vehicula id, aliquam non dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at sollicitudin lorem, non
  suscipit urna. Aliquam eget nulla urna. Mauris ullamcorper sed tellus vel euismod. Proin blandit ipsum interdum, tempus mauris in, mattis felis. In et sollicitudin tellus. Maecenas orci nunc, feugiat et ultrices sit amet, hendrerit nec nibh. Nulla eu
  quam vel neque rhoncus tincidunt. Proin quis ligula at nulla aliquet dapibus vitae vel dolor. Vestibulum et metus eu orci molestie volutpat.
</div>
<div class="content overlay-two">
  Ut eget dapibus mauris. Nunc auctor rutrum vulputate. Nullam non lacinia nisi. Pellentesque tempor, magna sit amet tempor ultrices, mauris nisi mattis mauris, id egestas erat erat vitae nisl. Aenean tempor gravida ante. Phasellus lacus ipsum, pulvinar
  a condimentum in, interdum sed augue. Nullam blandit congue diam, sit amet vestibulum metus iaculis non. Vestibulum tempor arcu ut ligula rhoncus porta luctus in dui. Aliquam aliquet, elit vitae tristique mattis, risus dui laoreet nisl, id imperdiet
  felis nulla eget magna. Praesent et leo ultrices, ultrices justo placerat, fringilla nisl. Donec id consectetur ex. Nullam a fermentum turpis. Nulla facilisi.
</div>
<div class="cutoff-after">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search