CSS изменение картинки при наведении курсора

Это просто магия CSS3, состоящая из transition и transform свойств, а также их функций и параметров.

by Константин Кирилюк

HTML

<figure>
  <a href="https://lh5.googleusercontent.com/-EUfPU1VMpwU/VyjM7fzZIiI/AAAAAAABKi4/dJNIK_XrB_0Ba7PRTq1CusZqvJ1Sx1rTgCL0B/s1600/0_bb69f_f11399ad_XXL.jpg" title="баржа вода июнь рассвет река туман утро шексна"><img alt="баржа вода июнь рассвет река туман утро шексна" src="https://lh5.googleusercontent.com/-EUfPU1VMpwU/VyjM7fzZIiI/AAAAAAABKi4/dJNIK_XrB_0Ba7PRTq1CusZqvJ1Sx1rTgCL0B/s300/0_bb69f_f11399ad_XXL.jpg" border="0"></a>
  <figcaption>mv12345, «Туманный рассвет на Шексне»</figcaption>
</figure>

CSS

figure img {
  /* Chrome до версии 26.0, Safari, Android и iOS */
  -webkit-transition: -webkit-transform 0.3s ease-out 0s;
  /* Firefox до версии 16.0 */
  -moz-transition: -moz-transform 0.3s ease-out 0s;
  /* Opera до версии 12.10 */
  -o-transition: -o-transform 0.3s ease-out 0s;
  transition: transform 0.3s ease-out 0s;
}

figure img:hover {
  /* Chrome, Safari, Android и iOS */
  -webkit-transform: rotate(-3deg) scale(1.1);
  /* Firefox до версии 16.0 */
  -moz-transform: rotate(-3deg) scale(1.1);
  /* Internet Explorer 9 */
  -ms-transform: rotate(-3deg) scale(1.1);
  /* Opera до версии 12.10 */
  -o-transform: rotate(-3deg) scale(1.1);
  transform: rotate(-3deg) scale(1.1);
  /* Chrome до версии 26.0, Safari, Android и iOS */
  -webkit-transition: -webkit-transform 0.3s ease-out 0s;
  /* Firefox до версии 16.0 */
  -moz-transition: -moz-transform 0.3s ease-out 0s;
  /* Opera до версии 12.10 */
  -o-transition: -o-transform 0.3s ease-out 0s;
  transition: transform 0.3s ease-out 0s;
}