При наведении на картинку, она меняется

Чтобы при наведении на картинку, она менялась, достаточно применить псевдокласс :hover.

Самый простой вариант

В первом примере мы будет изменять фоновое изображение background.

<style type="text/css"> 
.izo { 
background: url(http://изо1.jpg) no-repeat 50% 50%;  
display: block;
width: 400px; 
height: 400px; 
}

.izo:hover { 
background: url(http://изо2.jpg) no-repeat 50% 50%; 
} </style> 

<a href="#" class="izo"></a>

Второй вариант, когда при наведении на картинку, она меняется

То же самое можно оформить с помощью прозрачности фона. Только здесь тег a не пустует.

<style type="text/css">
.demoizo {
  display: block;
  text-align: center;
 }

.demoizo:hover, .demoizo:focus, .demoizo:active {
  background: url(http://изо2.jpg) no-repeat 50% 50%;
 }

.demoizo:hover img, .demoizo:focus img, .demoizo:active img  {
  background: transparent;
  visibility: hidden;
}
</style>


<a href="#" class="demoizo">
<img src="http://изо1.jpg" />
</a>

Третий вариант

Или благодаря тому, что размещаем один элемент под другим с помощью position: absolute (см. vagabundia.blogspot.com).

<style type="text/css">
  .demo { 
    position:relative; 
    margin:0 auto; 
    height: 400px;
    width:400px;
    display: block;
}

  .demo img { 
    left: 0; 
    position:absolute; 
    top: 0; 
}

  .demo img.raz {opacity:0;filter:alpha(opacity=0);}
  .demo:hover img.raz {opacity:1;filter:alpha(opacity=100);}
  .demo:hover img.dva, .demo img.dva:hover {opacity:0;filter:alpha(opacity=0);}
    
</style>

<a class="demo" href="#">
<img class="raz" src="http://изо2.jpg" />
<img class="dva" src="http://изо1.jpg" />
</a>

Добавив свойство transition в последнем примере, изменения будут происходить более плавно.

.demo img {
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

Пункт 3.1. Здесь же можно внести свойство transform.

.demo img.raz {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}

.demo:hover img.raz {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}

.demo:hover img.dva {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}

Пункт 3.2. Или так.

.demo img.raz {
  -moz-transform:scale(1,0);
  -webkit-transform:scale(1,0);
  -o-transform:scale(1,0);
  -ms-transform:scale(1,0);
}
 .demo:hover img.raz {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}
 .demo:hover img.dva {
  -moz-transform:rotate(360deg) scale(0);
  -webkit-transform:rotate(360deg) scale(0);
  -o-transform:rotate(360deg) scale(0);
  -ms-transform:rotate(360deg) scale(0);
}

Пункт 3.3. А можно воспользоваться свойством margin.

.demo { overflow:hidden; }

.demo img.dva, .demo:hover img.raz { margin-top: 0px; }

.demo:hover img.dva { margin-top: 400px; }

.demo img.raz { margin-top: -400px; }

Пункт 3.4. Главное, чтоб фантазии хватило.

.demo { overflow:hidden; }

.demo img.dva, .demo:hover img.raz { margin: 0px; }

.demo:hover img.dva {
  margin-top:400px; 
  margin-left:400px;
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
}

.demo img.raz {
 margin-top:-400px; margin-left:-400px;
}

Последний предложенный Пункт 3.5. будет в разных браузерах отображаться по разному при наведении на картинку курсора, поскольку нет единой договорённости относительно сочетания transform: translate и transform-origin. Мне нравится больше вариант в Mozilla Firefox.

.demo:hover img.dva {
  -moz-transform: translate(250px, -1400px) scale(0.5, 0.5);
  -webkit-transform: translate(250px, -1400px) scale(0.5, 0.5);
  -o-transform: translate(250px, -1400px) scale(0.5, 0.5);
  -ms-transform: translate(250px, -1400px) scale(0.5, 0.5);
  -moz-transform-origin: 0px 2700px;
  -webkit-transform-origin: 0px 2700px;
  -o-transform-origin: 0px 10000px;
  -ms-transform-origin: 0px 2700px;
  opacity:0.3;filter:alpha(opacity=0.3);} 

  .demo:hover img.raz {z-index: 2;} 

На www.cssplay.co.uk дан более трудоёмкий способ.

Возможно вы искали вариант, когда при наведении на картинку, она увеличивается.

источник