Put an image under your URL and make it move on hover

<style>


.profile .url-info p:last-child {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  min-height: 180px; 

}


.profile .url-info p:last-child:after {

  content: "";

  position: absolute;

  top: 30px;

  left: 50%;

  transform: translateX(-50%);

  display: block;

  width: 150px; 

  height: 150px; 

  background-image: url(your image here);

  background-position: center;

  background-size: contain;

  background-repeat: no-repeat;

  z-index: 2;

  animation: none;

  transition: transform 0.3s ease;

}


.profile .url-info p:last-child::before {

  content: "";

  position: absolute;

  top: 30px;

  left: 50%;

  transform: translateX(-50%);

  display: block;

  width: 150px; 

  height: 150px;

  background-image: url(your image again);

  background-position: center;

  background-size: contain;

  background-repeat: no-repeat;

  z-index: 1;

  filter: blur(5px);

  opacity: 0.4;

  animation: none;

  transition: transform 0.3s ease;

}


.profile .url-info p:last-child:hover:after {

  animation: multiGlide 3s infinite ease-in-out;

}


.profile .url-info p:last-child:hover:before {

  animation: multiGlideShadow 2s infinite ease-in-out;

}


@keyframes multiGlide {

  0% { transform: translate(-50%, 0) rotate(0deg); }

  20% { transform: translate(-30%, -30px) rotate(2deg); }

  40% { transform: translate(-70%, 20px) rotate(-2deg); }

  60% { transform: translate(-40%, 50px) rotate(3deg); }

  80% { transform: translate(-60%, -40px) rotate(-3deg); }

  100% { transform: translate(-50%, 0) rotate(0deg); }

}


@keyframes multiGlideShadow {

  0% { transform: translate(-50%, 0) rotate(0deg); }

  15% { transform: translate(-70%, 40px) rotate(-2deg); }

  30% { transform: translate(-30%, -20px) rotate(3deg); }

  45% { transform: translate(-60%, 60px) rotate(-3deg); }

  60% { transform: translate(-40%, -40px) rotate(2deg); }

  75% { transform: translate(-50%, -50px) rotate(-2deg); }

  90% { transform: translate(-30%, 30px) rotate(4deg); }

  100% { transform: translate(-50%, 0) rotate(0deg); }

}


</style>


2 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )