Show A rotated full opacity shadow on Hover on any section/container

WordPress CSS July 23, 2026
  1. Add a class to a container:
  2. Add this custom css:
.custom-card-hover {
  position: relative; /* Ensure positioning for pseudo-element */
  z-index: 1; /* Keep the element above the pseudo-element */
  transition: transform 0.3s ease; /* Add this if the main div itself has transform animations */
}
.custom-card-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* Hidden initially */
  transform: rotate(0deg); /* Keep shadow rotation at 0% by default */
  box-shadow: none; /* No shadow initially */
  z-index: -1; /* Place behind the card */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; /* Smooth transition */
}
.custom-card-hover:hover::before {
  transform: rotate(3deg); /* Rotate shadow on hover */
  box-shadow: 35px 32px 0px 2px rgba(0, 0, 0, 0.1); /* Shadow on hover */
  background: rgba(0, 0, 0, 0.05); /* Optional subtle background effect */
}
.custom-card-hover:hover {
  transform: none; /* Ensure the main div does not rotate or transform */
}

Hurrah – Done