Search code examples
javascripthtmlcsscursortransform

CSS transform translate and scale interaction

I've got a custom cursor that follows the normal mouse cursor, therefore I want it to be translated -50% so that it's origin is the pointer. However, I also want the cursor to scale up whenever it hovers a link or an image but I can't seem to fuse the two. I can either get it to grow larger but not from the pointer or come from the pointer but not grow larger. Does anyone know what the fix is to this? It's probably something I'm overlooking. Thank you in advance!

#cursor {
   width: 13px;
   height: 13px;
   border: 1px solid #373839;
   position: fixed;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   transition: transform 0.3s ease, scale 0.3s ease, background 0.3s ease, top 0.056s ease, left 0.056s ease;
}

.linkHover {
   transform: scale(1.5);
   background-color: #373839;
}
Solution

  • You just need to set an additional rule for #cursor:

    transform-origin: top left;

    Also, in .linkHover, make sure you preserve your translate if they are applied to the same element:

    .linkHover {
   transform: translate(-50%, -50%) scale(1.5);
   background-color: #373839;
}