<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>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )