Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Black and white image on hover:
- Paste this under <style type=”text/css”>
- img{
- -webkit-filter: grayscale(0%);
- }
- img:hover{
- -webkit-filter: grayscale(100%);
- z-index: -9999999999999999999999999px;
- }
- To make posts b&w on normal & colored on hover:
- img{
- -webkit-filter: grayscale(100%);
- }
- img:hover{
- -webkit-filter: grayscale(0%);
- z-index: -9999999999999999999999999px;
- }
- _______________________________________________________________________________________________
- Blurred picture on hover:
- Paste this under <style type=”text/css”>
- img:hover {
- -webkit-filter: blur(5px);
- -webkit-transition: 1s ease-in-out;
- }
- ____________________________________________________________________
- Shaking pictures on hover:
- Paste this under <style type=”text/css”>
- .photo:hover img{ -webkit-animation-name: myfirst; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @-moz-keyframes myfirst /* Firefox*/ { { -ms-transform:: translate(-1px, -2px) rotate(-1deg); } 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } } @-ms-keyframes myfirst /* IE9*/ { 10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); } 20% { -ms-transform: translate(-3px, 0px) rotate(1deg); } 30% { -ms-transform: translate(0px, 2px) rotate(0deg); } 40% { -ms-transform: translate(1px, -1px) rotate(1deg); } 50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -ms-transform: translate(-3px, 1px) rotate(0deg); } 70% { -ms-transform: translate(2px, 1px) rotate(-1deg); } 80% { -ms-transform: translate(-1px, -1px) rotate(1deg); } 90% { -ms-transform: translate(2px, 2px) rotate(0deg); } 100% { -ms-transform: translate(1px, -2px) rotate(-1deg); } } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement