<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=9"> <meta http-equiv="X-UA-Compatible" content="IE=10"> <meta http-equiv="X-UA-Compatible" content="IE=11"> <style type="text/css"> img{ display:block; max-width:300px !important; transition:transform .4s; -ms-transition:transform .4s; -webkit-transition:.4s; -moz-transition:.4s; margin:50px auto; } .images:hover{ transform:scale(1.5); -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -ms-transform:scale(1.5); -0-transform:scale(1.5); -khtml-transform:scale(1.5); } .grey{ -ms-filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); filter: grayscale(1); -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: url('url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'> <feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");'); filter: gray; } </style> </head> <body> <img src="http://throwbacksoundtrack.org/wp-content/uploads/2012/10/wallpaper-1162140.jpg" alt="" class="images grey"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript"> $('.images').hover(function(){ $(this ).toggleClass( 'grey') }); </script> </body> </html> This is not working in IE 11, or rather transition does not work - how to fix it?