Работа с эффектами наведения курсора CSS – смена картинок

Пример со сменой фонового изображения background:
Добавляем гипер-ссылку с классом izo на веб-страницу

Пример со сменой фонового изображения background:
Добавляем css-стиль для класса .izo и класса .izo:hover
<br>.izo { background: url(buton.jpg) <br>no-repeat 50% 50%; <br>display: block; <br>width: 400px; <br>height: 400px; } <br>.izo:hover { background: url(roza.jpg)<br> no-repeat 50% 50%; } <br>

Пример со сменой картинки при наведении:
Добавляем картинку гипер-ссылку с классом demoizo на веб-страницу

Пример со сменой картинки при наведении:
Добавляем css-стиль для класса .demoizo и класса .demoizo:hover
<br>.demoizo <br>{ display: block; <br>text-align: center; } <br>.demoizo:hover, .demoizo:focus, .demoizo:active <br>{ background: url(roza.jpg) <br>no-repeat 50% 50%; } <br>.demoizo:hover img, .demoizo:focus img, .demoizo:active img { background: transparent; <br> visibility: hidden; } <br>

Пример с размещением одного элемента под другим с помощью position: absolute:
Добавляем гипер-ссылку с классом demo на веб-страницу, в нее помещаем 2 картинки с классами raz и dva

Пример с размещением одного элемента под другим с помощью position: absolute:
Добавляем css-стиль для класса .demo и класса .demo img, .demo img.raz, .demo img.dva
<br>.demo {position:relative;<br>margin:0 auto; <br>height: 400px;<br>width:400px;<br>display: block; } <br>.demo img {left:0;<br>position:absolute;<br>top:0;} <br>.demo img.raz {left:0;<br>position:absolute;<br>top:0;<br>opacity:1; <br>filter:alpha(opacity=100);}<br>.demo img.dva {left:0;<br>position:absolute;<br>top:0;}<br>

Пример с размещением одного элемента под другим с помощью position: absolute:
Добавляем css-стиль для класса .demo:hover img.raz
и класса .demo:hover img.dva, .demo img.dva:hover
<br>.demo:hover img.raz <br>{opacity:1; <br>filter:alpha(opacity=100);} <br>.demo:hover img.dva, .demo img.dva:hover <br>{opacity:0; <br>filter:alpha(opacity=0);} <br>

Пример с размещением одного элемента под другим с помощью position: absolute:
Добавляем свойство transition для более плавного перехода в стиль .demo img.dva
<br>.demo img.dva {left:0;<br>position:absolute;<br>top:0;<br>opacity:1; <br>filter:alpha(opacity=100);<br>transition:all 1s;}<br>

Пример с размещением одного элемента под другим с помощью position: absolute:
Также можно добавить свойство transform
<br>.demo img.raz <br>{ -moz-transform:scale(0); <br>-webkit-transform:scale(0); <br>-o-transform:scale(0); <br>-ms-transform:scale(0); } <br>.demo:hover img.raz <br>{ -moz-transform:scale(1); <br>-webkit-transform:scale(1); <br>-o-transform:scale(1); <br>-ms-transform:scale(1); } <br>.demo:hover img.dva <br>{ -moz-transform:scale(0); <br>-webkit-transform:scale(0); <br>-o-transform:scale(0); <br>-ms-transform:scale(0); }<br>

Пример свойством transform в другом варианте
Добавляем гипер-ссылку с классом demo на веб-страницу, в нее помещаем 2 картинки с классами raz и dva

Пример свойством transform в другом варианте
Добавляем css-стиль для класса .demo и класса .demo img, .demo img.raz, .demo img.dva
<br>.demo {position:relative;<br>margin:0 auto; <br>display: block; } <br>.demo img {left:0;<br>position:absolute;<br>top:0;} <br>.demo img.raz {left:0;<br>position:absolute;<br>top:0;<br>opacity:1; <br>filter:alpha(opacity=100);}<br>.demo img.dva {left:0;<br>position:absolute;<br>top:0;}<br>

Пример свойством transform в другом варианте
Добавляем свойство 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; }

Пример свойством transform в другом варианте
Добавляем свойство transform
<br>.demo img.raz <br>{</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример свойством transform в другом варианте Добавляем свойство transform .demo img.raz {" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/1148582/slide-13.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/1148582/slide-13.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/1148582/slide-13.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/1148582/slide-13.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/1148582/slide-13.jpg" class="slides-image"><!----><div class="slides-content">-moz-transform:scale(1,0); <br>-webkit-transform:scale(1,0); <br>-o-transform:scale(1,0); <br>-ms-transform:scale(1,0); } <br>.demo:hover img.raz <br>{ -moz-transform:scale(1); <br>-webkit-transform:scale(1); <br>-o-transform:scale(1); <br>-ms-transform:scale(1); } <br>.demo:hover img.dva <br>{ -moz-transform:rotate(360deg) scale(0); <br>-webkit-transform:rotate(360deg) scale(0); <br>-o-transform:rotate(360deg) scale(0); <br>-ms-transform:rotate(360deg) scale(0); }

Пример перехода со свойством margin
Добавляем гипер-ссылку с классом demo на веб-страницу, в нее помещаем 2 картинки с классами raz и dva

Пример перехода со свойством margin
Добавляем css-стиль для класса .demo и класса .demo img, .demo img.raz, .demo img.dva
<br>.demo {position:relative;<br>margin:0 auto; <br>display: block;<br>height:800px;<br>width:800px; } <br>.demo img {left:0;<br>position:absolute;<br>top:0;} <br>.demo img.raz {left:0;<br>position:absolute;<br>top:0;<br>opacity:1; <br>filter:alpha(opacity=100);}<br>.demo img.dva {left:0;<br>position:absolute;<br>top:0;}<br>

Пример перехода со свойством margin
Добавляем свойство 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; }