CSS rotate property won't apply to all gallery images - html

Question

HTML
<div class="photos">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
.............
</div>
CSS
.photos img:hover {
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
z-index: 10;}
why is the above CSS rotate property applied only to p1.jpg ?

Answer 1

Because you're only hovering on p1.jpg the CSS selector will only be fired on the image you are hovering.
If you just wan't each image to rotate seperatly, add these lines to your css.
-webkit-transition: all 1.2s linear;
-moz-transition: all 1.2s linear;
-o-transition: all 1.2s linear;
-ms-transition: all 1.2s linear;
transition: all 1.2s linear;
Unfortunately, what you're asking for will require some JavaScript to make happen.

Answer 2

Rotate works. Angle of 360 degrees brings the image in the same position. Use transform with transition or change the angle value.
So, your code will be something like:
.photos img {
-webkit-transition: -webkit-transform 1.2s linear;
-moz-transition: -moz-transform 1.2s linear;
-o-transition: -o-transform 1.2s linear;
-ms-transition: -ms-transform 1.2s linear;
transition: transform 1.2s linear;
overflow:hidden;
}
.photos img:hover {
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
-ms-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
z-index: 10;
}

Answer 3

this link can help you..
.elem{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
}
.elem:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
#-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}

Answer 4

There was no issue with your code. The rotate was working on all the elements of the div. The only reason you could not see it was because you did not have a delay or duration for the 'transformation'.
I have used the same code that 'Dragos Sandu' has used. Only change I suggest is the "ease-in-out" for the duration. specially when the change is only 1.2 seconds. This make the change "easy on the eye".
CSS
.photos img:hover {
transform: rotate(360deg) scale(1.5);
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
z-index: 10;
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
}
Working Demo