.scale { transition: all 0.3s ease-in-out; } .scale:hover { transform: scale(1.1); } @media only screen and (max-width: 767px) { .scale:hover { transform: none; } } / rotate / .rotate { transition: all 0.3s ease-in-out; } .rotate:hover { transform: rotate(-5deg); } @media only screen and (max-width: 767px) { .rotate:hover { transform: none; } } / position / .position { transition: all 0.3s ease-in-out; } .position:hover { transform: translate(0, -100px); } @media only screen and (max-width: 767px) { .position:hover { transform: none; } } / opacity / .opacity { transition: all 0.3s ease-in-out; opacity: 0.5; } .opacity:hover { opacity: 1; } @media only screen and (max-width: 767px) { .opacity:hover { transform: none; } } / jiggle / .jiggle { transition: all 0.3s cubic-bezier(0.475, 0.985, 0.12, 1.975); } .jiggle:hover { transform: scale(1.1); } @media only screen and (max-width: 767px) { .jiggle:hover { transform: none; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter