📄 Cheatsheets

🌟 CSS

CSS Transition

change background color to pink upon mouse hover scale picture upon mouse hover
  • Color Change

    • Changing the text color and background color on hover 

    
    /* set original text color to pink */
    .header {
      color: #be3455;
    }
    
    /* on hover, set text color to white
    and background color to pink in 0.4s */
    .header:hover {
      color: #F8F6F0;
      background-color: #be3455;
      transition: 0.4s
    }


  • Transformation Scale

    • Transformation scale to shrink image on hover 

    
    /* shrink image on hover */
    .picture:hover {
      filter: brightness(80%);
      transform: scale(0.97);
      transition: 0.3s
    }