WordPress Elementor ile Zoom In Profil Kart Efekti Yapımı

WordPress Elementor kullanarak hover anında görselin büyüdüğü, isim ve sosyal medya ikonlarının belirdiği şık bir Zoom In profil kart efekti hazırladım.
Hem estetik hem de etkileşimli bir tasarım oldu. Videoda tüm adımları uygulamalı olarak gösterdim.
İzlemek isteyenler için YouTube bağlantısını aşağıya bırakıyorum 👇


https://www.youtube.com/watch?v=NgtkPhcq6TA


Zoom CSS

selector {
  position: relative;
  overflow: hidden !important;
  z-index: 0;
}

selector::before,
selector .elementor-background-overlay {
  transition: transform 0.9s ease-in-out !important;
  transform-origin: left center !important;
  will-change: transform;
}

selector:hover::before,
selector:hover .elementor-background-overlay {
  transform: scale(2) !important;
}

Widget CSS

selector .elementor-widget {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(15px);
  transition: all 0.5s ease-in-out !important;
}

selector:hover .elementor-widget {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0);
}

Elinize sağlık.

Teşekkürler hocam.