1

I'm trying to achieve similar effect as listed here - https://www.harrythehirer.com.au/

This is what I have so far, but as you can see it's not complete.

Even though I've set opacity of li child to 0, when you hover in the blank area it activates the hover. 

div.section-44 {
  text-align: center;
}
div.section-44 span {
  display: inline-block;
  vertical-align: middle;
}
div.section-44 ul {
  padding-left: 0px;
}
div.section-44 ul li {
  list-style-type: none;
  background: red;
  padding: 20px 40px;
  color: #fff;
  border-radius: 50px;
}
div.section-44 ul li:nth-child(1), div.section-44 ul li:nth-child(2), div.section-44 ul li:nth-child(4), div.section-44 ul li:nth-child(5) {
  opacity: 0;
}
div.section-44 ul:hover li {
  opacity: 1;
}
<div class="section-44">
<h2>
<span>I want </span>
<span>
  <ul>
  <li><a href="#">to do A</a></li>
  <li><a href="#">to do B</a></li>
  <li><a href="#">to do C</a></li>
  <li><a href="#">to do D</a></li>
  <li><a href="#">s</a></li>
  </ul>
</span>
</h2>
</div>

Here's the jsfiddle -> https://jsfiddle.net/shutup/vrw0zp7L/16/

Any help is highly appreciated.

Thanks.

CodeBoyCode
  • 2,227
  • 12
  • 29
shutupchigo
  • 703
  • 1
  • 7
  • 19

3 Answers3

2

You could do this with position absolute and some transforms. The key is to have a separate list and show/hide it when you hover on a desired text.

It should look something like the code below:

div.section-44 {
  text-align: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.section-44 .items {
  display: inline-block;
  position: relative;
}
div.section-44 .items span {
  padding: 20px 40px;
  color: #fff;
  background: black;
  border-radius: 50px;
}
div.section-44 .items:hover ul {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
div.section-44 ul {
  padding-left: 0px;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 100%;
  opacity: 0;
  transition: 0.3s ease-out;
  background: green;
  border-radius: 50px;
  padding: 20px;
}
div.section-44 ul li {
  list-style-type: none;
  background: red;
  border-radius: 50px;
  color: #fff;
  padding: 20px 40px;
}
div.section-44 ul:hover ul {
  opacity: 1;
  visibility: visible;
}
<div class="section-44">
  <h2>
    <span>I want </span>
    <div class="items">
      <span>to do A</span>
      <ul>
        <li><a href="#">to do A</a></li>
        <li><a href="#">to do B</a></li>
        <li><a href="#">to do C</a></li>
        <li><a href="#">to do D</a></li>
        <li><a href="#">s</a></li>
      </ul>
    </div>
  </h2>
</div>

Source Scss in fiddle

Mihai T
  • 17,254
  • 2
  • 23
  • 32
0

You are setting opacity to 0 and 1. Instead set set display to none and block and it will work. Reason opacity just controls the transparency but it will be present and take the space which is not the case with display set to none.

Look at the below post for detailed explanation

Does opacity:0 have exactly the same effect as visibility:hidden

div.section-44 {
  text-align: center;
}

div.section-44 span {
  display: inline-block;
  vertical-align: middle;
}

div.section-44 ul {
  padding-left: 0px;
}

div.section-44 ul li {
  list-style-type: none;
  background: red;
  padding: 20px 40px;
  color: #fff;
  border-radius: 50px;
}

div.section-44 ul li:nth-child(1),
div.section-44 ul li:nth-child(2),
div.section-44 ul li:nth-child(4),
div.section-44 ul li:nth-child(5) {
  display: none;
}

div.section-44 ul:hover li {
  display: block;
}
<div class="section-44">
  <h2>
    <span>I want </span>
    <span>
  <ul>
  <li><a href="#">to do A</a></li>
  <li><a href="#">to do B</a></li>
  <li><a href="#">to do C</a></li>
  <li><a href="#">to do D</a></li>
  <li><a href="#">s</a></li>
  </ul>
</span>
  </h2>
</div>
Shubham Gupta
  • 2,596
  • 1
  • 8
  • 19
  • I thought of adding display:none but as you can see page bounces a lot because of that. Any way to make it as smooth as the site I listed? – shutupchigo Sep 24 '18 at 11:39
  • @SunilPatel inspect the code on that web site :) You will get a better idea how they have structured the elements, and you can see that they're adding a couple of classes with Javascript – VilleKoo Sep 24 '18 at 11:48
0
div.section-44 {
text-align:center;
  & span {
    display:inline-block;
        vertical-align:middle;

  }
  & ul {
    padding-left:0px;



    & li {
      list-style-type:none;
      background:red;
      padding:20px 40px;
      color:#fff;
      border-radius:50px;
      &:nth-child(1), &:nth-child(2),&:nth-child(4), &:nth-child(5) {
        opacity:0;
      }
    }
     &:hover {
      background : red;
      border-radius: 25px;

        & li {
          opacity:1;
        }
      }
  }
}
Abdulla Thanseeh
  • 9,438
  • 3
  • 11
  • 17