HCDE 438 Cheatsheet - a collection of helpful code

          
            .hover-title {
              display: inline;
              pointer-events: auto;
              cursor: pointer;
            }
            
            .hover-image {
              visibility: hidden;
            }
            
            body:not(.mobile) .hover-title:hover + .hover-image {
              visibility: visible;
              pointer-events: none;
            }
            
            .hover-image {
              display: flex;
              position: fixed;
              top: 40%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: -1;
              pointer-events: none;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            
            /* Change width and height to scale images */
              width: 50vw;
              height: 50vh;
            }
            
            .hover-image img {
              max-width: 100% !important;
              max-height: 100% !important;
              width: auto !important;
              height: auto !important;
              margin-bottom: 0;
            }
          
        

            
      script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js" 
      integrity="sha512-3WFaXQUsbGieECwv3t3DvyAkZ7pp+/rIKOQnx7NKhfwIF0u2l+DYsE2eF635ewJVj3YTU4/Ug6UqEkSTZCiSew==" 
      crossorigin="anonymous" referrerpolicy="no-referrer"
      script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.js" 
      integrity="sha512-TU9AWtV5uUZPX8dbBAH8NQF1tSdigPRRT82vllAQ1Ke28puiqLA6ZVKxtUGlgrH6yWFnkKy+sE6luNEGH9ar0A==" 
      crossorigin="anonymous" referrerpolicy="no-referrer"