0

I have write some line of stylesheet code for applying the transition and transform effect for an image. The problem is that the code is working for Internet Explorer browser fine but not working in Google Chrome browser.

<a href="/SM/AddSMHome/" title="Add New Student" class="rotateImage">
<img src="/icon/SM_add_student3.png" class="img- responsive img-circle img-thumbnail" style="max-width: 100px;max-height: 100px;" alt="Add New Student"></a>

.rotateImage:hover {
    transition: all 800ms ease-in-out !important;
    -ms-transform: rotate(360deg) !important;
    -webkit-transform: rotate(360deg) !important;
    -moz-transform: rotate(360deg) !important;
    -o-transform: rotate(360deg) !important;
     transform: rotate(360deg) !important;
           }
مظہر امام
  • 1
  • 1

2 Answers2

0

Non-replaced inline boxes are not part of what is considered a “transformable” element, and a is inline by default.

Add display:inline-block for the element, then it will work.

(I would advise to add that for the default state of the element though, if you only add it on hover, it might have unexpected side effects in more complex layouts.)

misorude
  • 3,381
  • 2
  • 9
  • 16
0

If you add display:block to the link it works. 

.rotateImage  {
display: block;
}
.rotateImage:hover {
    transition: all 800ms ease-in-out !important;
    -ms-transform: rotate(360deg) !important;
    -webkit-transform: rotate(360deg) !important;
    -moz-transform: rotate(360deg) !important;
    -o-transform: rotate(360deg) !important;
     transform: rotate(360deg) !important;
     
           }
<a href="/SM/AddSMHome/" title="Add New Student" class="rotateImage">
<img src="/icon/SM_add_student3.png" class="img- responsive img-circle img-thumbnail" style="max-width: 100px;max-height: 100px;" alt="Add New Student"></a>
cloned
  • 6,346
  • 4
  • 26
  • 38