Template:Hover Effect/styles.css: Difference between revisions

From Mizuumi Wiki
Jump to navigation Jump to search
(Undo revision 305730 by Ougon (talk))
Tag: Undo
m (trying to remove the blur)
Line 3: Line 3:
}
}
.add-hover-effect img:hover {
.add-hover-effect img:hover {
transform: scale(1.05);
transition: width 200ms ease-in-out, height 200ms ease-in-out;
width: auto;
    width: 105%;
height: auto;
    height: 105%;
    transition: all 200ms ease-in-out;
}
}
.add-hover-effect--2 div:hover img {
.add-hover-effect--2 div:hover img {

Revision as of 10:24, 7 February 2024

.add-hover-effect, .add-hover-effect--2 {
	overflow: visible;
}
.add-hover-effect img:hover {
	transition: width 200ms ease-in-out, height 200ms ease-in-out;
    width: 105%;
    height: 105%;
}
.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); }
}