Product preview card component

Community feedback

• 

  Kyle•80

  @KylesTech95Posted about 2 years ago

  Hi Lewis!

  Great job on this project! I truly appreciate the use of CSS flexbox, Grid and Media Query for your design. Although your CSS look sharp, I thought I would share an addition to your preview card that would affect the presentation when moving in and out of the mobile/desktop View.

  • Image Fade-in/Fade-out when switching between device screens.

  Simply program the animation property's name, time, and the animation-fill-mode. Upon completion, program a @keyframes selector with the [animation name]. Programming the keyframe's opacity alone will make the image appear from a transparent state to its full state with the ease-in/ease-out function. ITS SO COOL!

  Desktop:

  img {
    max-width: 100%;
      /*added animation*/
    animation: appearIn .45s ease-in-out forwards; 
  }
  @keyframes appearIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 100%;
    }
   }
  
  

  Mobile:

  picture img {
      height: 100%;
      /*added animation*/
      animation: appearOut .45s ease-in-out forwards; 
    }
    @keyframes appearOut {
      from {
        opacity: 0;
      }
    
      to {
        opacity: 100%;
      }
     }
  
    .container p {
      margin-bottom: 1rem;
    }
  }
  

  I hope this addition helps! Great work!

  Marked as helpful

  1