Крутой эффект изменение картинки на CSS
 | |
| В данной статье узнаем, как при помощи CSS создать эффект для смены изображение на другое, которое производится при наведении курсора на основу. Такой эффект можно увидеть на различных тематических сайтов. Здесь не нужно путать, что при наведении меняется оттенки, нет, здесь меняет одну картинку на другую. Это может быть черно-белое изображение, что видим по умолчанию. Но только навели на его, как производится подмена, и появляется цветная картинка, что аналогично первой. Как поняли, это здесь мы задействовали 2 изображение, где под номером один или при открытии страницы видим черно-белую картинку, как только курсор наводим на основу картинки, как автоматически меняем на цветной рисунок, где даже получается красивый эффект, в том случай, если изображение аналогичны, только разная палитра цветов. Но самый вкус являться в том, что происходящая смена происходит в плавном режиме, а не мгновенно, как многие подумали. Одно из главных, здесь не задействован Javascript. Если вам нужен просто эффект, который заключается в том, как автоматическая смена картинок на CSS, где на автомате меняются данные картинки по заданному времени, где количество изображений зависит от вас. Создать смена картинки на другую при наведении курсора на чисто CSS Здесь как можно заметить, что не так сложно, как изначально может показаться. У нас находиться каркас, где прописаны ссылка на 2 изображения с классами kuneda и vselan. Установка: HTML Код <div id="karkas_ckuna"> <img class="kuneda" src="http://zornet.ru/_fr/91/8588108.jpg" /> <img class="vselan" src="http://zornet.ru/_fr/91/4588941.jpg" /> </div> CSS Код #karkas_ckuna { position:relative; height:385px; width:180px; margin:0 auto; cursor:pointer; } #karkas_ckuna img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #karkas_ckuna img.vselan:hover { opacity:0; } Это простой эффект, который разработан на чистом CSS, что можно задействовать его на сайте, чем украсить или красиво оформить свой портал, чем по своей стилистике становиться интересным с различными фишками. Если интересно, как все работает: Все просто, первая картинка лежит по вверх второй, но когда мы наводим курсор, то верхнее изображение делаем прозрачным до нуля, что автоматически появляется второй вид изображения. Где мы наблюдаем полноценную замену, что делается в планом эффекте, где можно все посмотреть, изначально зная конструкцию работы. Как можно понять, что есть много различных эффектов по смене картинок, как пример это изменение картинки при наведении клика, что автоматически меняются снимки, только уже под совершенно другим эффектом. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
