Rainbow

HTML

<div class="hovergallery12"><img src="https://jpg" alt="" width="185px" height="210px" /><img src="https://jpg" alt="" width="185px" height="210px" /></div>

CSS

.hovergallery12 img{
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
/* rainbow */
margin: 10px 5px 5px 5px; 
border: 2px dotted #fff;
border-radius: 10px;
box-shadow: 3px 2px 6px #000000;

} 
@-webkit-keyframes hue {
100% { -webkit-filter:hue-rotate(360deg); }
}
 
.hovergallery12 img:hover{
border: 1px dotted #fff; 
border-radius: 1em;
-webkit-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2); 
-moz-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2); 
box-shadow:2px 2px 3px 3px rgba(0,0,0,0.2); 
-webkit-animation:hue 1s linear infinite;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
}