:root{
  --dots-fade-duration: .9s;
  --dots-second-image-bg: #fff;
  --dots-click-zoom-scale: 2;
  --dots-zoom-duration: .3s;
}

/* Loops (archive/search/widgets) */
a:has(img.dots-second-image){ position: relative; display: block; }
a img.dots-second-image{
  position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--dots-fade-duration,.9s) ease-in-out;
  width: 100%; height: 100%;
  object-fit: contain; background: var(--dots-second-image-bg);
  pointer-events: none; z-index: 1;
}
a:hover:has(img.dots-second-image) img:not(.dots-second-image){
  opacity: 0; transition: opacity var(--dots-fade-duration,.9s) ease-in-out;
}
a:hover img.dots-second-image, a:focus img.dots-second-image{ opacity: 1; }