Loopstudios landing page

Community feedback

• 

  BreinerJT•530

  @BreinerJTPosted over 2 years ago

  Hello Jose, Congratulations on finishing this challenge!

  For your .creation-items is not necessary create a class for every element like you do (.creation-item-one, .creation-item-two, etc), the pseudo class :nth-of-type will make this easy for you and help to maintain the html code cleaner. About the hover effect, your .creation-item:hover::before is ok but you need to create first a .creation-item:before, like this:

    .creation-item:before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      background: rgba(255, 255, 255);
      opacity: .7;
      transition: all .2s ease-in-out;
      cursor: pointer;
  }
  .creation-item:hover::before {
      content: '';
      position: absolute;
      width: 100%;
  }
  

  This one make the transition go from left to right because .creation-item:before width is set to 0 and your .creation-item:hover::before has a widht set to 100%. U can also set the width to 100%, height to 0% in the.creation-item:before and height to 100% in the .creation-item:hover::before and this will make the transition go from top to bottom.

  Marked as helpful

  1

  ---

  

  Jose Gonzalez•310

  @placetenoPosted over 2 years ago

  @BreinerJT Thanks a lot for your thorough comment! This is what makes this community so great, people helping each other out.

  I didn't realize I could have used the :nth-of-type pseudo class for each element and it makes perfect sense, the code is definitely much cleaner. I'll do some refactoring with your idea and your suggestion about the hover effect. Thanks again!

  1
• 

  Karabo Sambo•240

  @blaqbox-primePosted over 2 years ago

  For the hover effect, since it wasn't specified on the 'How' part of it all, I decided to create this dropdown effect instead of the standard "color fading in" type of effect. Check out the piece of code i quoted on my github repo for this project - https://github.com/blaqbox-prime/loopstudios-landing-page

  also give the site a quick visit to see what the effect looks like. https://blaqbox-prime.github.io/loopstudios-landing-page/

  Marked as helpful

  0

  ---

  

  Jose Gonzalez•310

  @placetenoPosted over 2 years ago

  @blaqbox-prime Thanks for your suggestions! I'll check it out.

  0