Template:Hover Effect/styles.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(trying to remove the blur) |
||
Line 1: | Line 1: | ||
.add-hover-effect, .add-hover-effect--2 { | .add-hover-effect, .add-hover-effect--2 { | ||
overflow: visible; | overflow: visible; | ||
} | |||
.add-hover-effect img { | |||
transform: scale(.9) | |||
} | } | ||
.add-hover-effect img:hover { | .add-hover-effect img:hover { | ||
transform: scale(1 | transform: scale(1); | ||
width: auto; | width: auto; | ||
height: auto; | height: auto; |
Revision as of 09:58, 7 February 2024
.add-hover-effect, .add-hover-effect--2 {
overflow: visible;
}
.add-hover-effect img {
transform: scale(.9)
}
.add-hover-effect img:hover {
transform: scale(1);
width: auto;
height: auto;
transition: all 200ms ease-in-out;
}
.add-hover-effect--2 div:hover img {
animation: rattle 0.25s 1 forwards;
}
.add-hover-effect .thumb, .add-hover-effect--2 .thumb {
overflow: visible;
}
@keyframes rattle {
0% { transform: rotate(0deg); }
25% { transform: rotate(3deg); }
30% { transform: rotate(0deg); }
50% { transform: rotate(-0.5deg); }
75% { transform: rotate(0deg); }
100% { transform: rotate(2deg); }
}