Css при наведении меняется картинка: Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

html — Смена картинки при наведении

Вопрос задан 6 лет 1 месяц назад

Изменён 6 лет 1 месяц назад

Просмотрен 9k раз

Подскажите пожалуйста, в чем ошибка? Не могу понять,что делаю не так в простом действии — необходимо,чтобы картинка изменялась при наведении курсора.

.izo {
display: inline-block;}

a.izo:hover {
background: url("other_pic.png") no-repeat 50% 50%;}

<a href="/add/"><img src="/pic.png"></a>

• html
• css

• Тегу img нельзя применить свойство background!
• У тега img уже по-умолчанию задано display: inline-block;

Можно применить смену фоновых изображений к ссылке.

Как один из возможных вариантов:

a {
  display: inline-block;
}

img {
  transition: all .3s ease;
}

a:hover img {
  opacity: 0;
}

a:hover {
  background: url("http://wpguru.co.uk/wp-content/uploads/2013/09/CSS-Logo-214x300.png") no-repeat 50% 50%;
}

<a href="/add/">
  <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
</a>

1

Вы картинку на HTML добавляете через img src, а пытаетесь изменить свойство background в CSS

Вам нужно картинку добавлять с помощью

CSS в класс izo

.izo {
    display: inline-block;
    background: url("pic.png") no-repeat 50% 50%;}
}
a.izo:hover {
    background: url("other_pic.png") no-repeat 50% 50%;
}

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как при наведении на картинку заменить ее на другую картинку css

Крутой эффект изменение картинки на CSS

Как поняли, это здесь мы задействовали 2 изображение, где под номером один или при открытии страницы видим черно-белую картинку, как только курсор наводим на основу картинки, как автоматически меняем на цветной рисунок, где даже получается красивый эффект, в том случай, если изображение аналогичны, только разная палитра цветов. Но самый вкус являться в том, что происходящая смена происходит в плавном режиме, а не мгновенно, как многие подумали. Одно из главных, здесь не задействован Javascript.

Если вам нужен просто эффект, который заключается в том, как автоматическая смена картинок на CSS, где на автомате меняются данные картинки по заданному времени, где количество изображений зависит от вас.

Создать смена картинки на другую при наведении курсора на чисто CSS

Здесь как можно заметить, что не так сложно, как изначально может показаться. У нас находиться каркас, где прописаны ссылка на 2 изображения с классами kuneda и vselan.

#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, что можно задействовать его на сайте, чем украсить или красиво оформить свой портал, чем по своей стилистике становиться интересным с различными фишками.

Если интересно, как все работает:

Все просто, первая картинка лежит по вверх второй, но когда мы наводим курсор, то верхнее изображение делаем прозрачным до нуля, что автоматически появляется второй вид изображения. Где мы наблюдаем полноценную замену, что делается в планом эффекте, где можно все посмотреть, изначально зная конструкцию работы.

Как можно понять, что есть много различных эффектов по смене картинок, как пример это изменение картинки при наведении клика, что автоматически меняются снимки, только уже под совершенно другим эффектом.

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Смена одной картинки на другую при наведении на нее курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но во многих случаях вполне достаточно и CSS.

Псевдокласс hover
Вначале разберем, как делается собственно сам эффект. Для этой цели используется псевдокласс hover, он через двоеточие добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже hover работает только со ссылками, тогда как другие браузеры понимают hover и для других элементов. Так что для универсальности придется помещать изображение внутрь контейнера. Сам рисунок добавляется и меняется с помощью стилевого атрибута background. Алгоритм действий следующий.
Готовится два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевой атрибут background со значением url(‘URI’), здесь URI — путь к графическому файлу.
Присоединяем псевдокласс к селектору A (a:hover) и снова включаем атрибут background, но в качестве значения указываем замещающее изображение.
Чтобы ссылка была по размеру картинки, ее следует превратить в блочный элемент с помощью атрибута display со значением block, а также задать высоту и ширину ссылки.

Остается собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к параметру href тега .
Пример 1. Использование псевдокласса hover

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

Приведенный способ хотя и прост в реализации, но имеет определенный недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.
Эффект перекатывания с одним рисунком
Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.

Смена одного рисунка на другой осуществляется сдвигом изображения по вертикали за счет использования универсального атрибута background или background-position, как показано в примере 2.

Пример 2. Изменение положения рисунка

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

Для селектора A устанавливается фоновое изображение через атрибут background, ширина (width) совпадает с рисунком, а высота (атрибут height) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.
При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.

Простые hover-эффекты для изображений при помощи CSS

Hover-эффекты — достаточно интересная тема для изучения. Ведь их применение может сделать ваш сайт более динамичным и живым. Сегодня мы рассмотрим некоторые эффекты для работы с изображениями. Каждый пример имеет HTML и CSS коды, которые вы можете увидеть в действии.

Посмотрите на демо ниже, чтобы увидеть все hover-эффекты, которые будут рассматриваться в этом уроке.

Установка

Перед тем, как приступить к созданию отдельных примеров, требуются некоторые базовые установки. Ниже приведен CSS-код, которые мы будем использовать, чтобы реализовать все примеры.

Большинство это основные вещи: box-sizing позволяет управлять моделями (не стесняйтесь применять более точные настройки, если вам не нравится универсальный селектор). Класс pic дает нам место, чтобы применять некоторые основные стили для каждой фотографии.

Масштабирование и панорамирование

Первая группа эффектов включает в себя использование некоторых приемов с hidden overflow.

Увеличение

Для начала, мы сделаем так, что, когда пользователь наводит курсор на изображение, фотография увеличивалась, но продолжала оставаться в пределах своих границ.

Вот HTML-код:

Обратите внимание, что изображение, которое было использовано в примере имеет размеры 400px на 400px. Теперь давайте посмотрим CSS.

Мы вначале устанавливаем размер изображения зооpx на 300px, а затем, когда пользователь наводит на него курсор, увеличиваем к 400px. Поскольку у нас overflow — hidden, это позволит нам получить эффект масштабирования.

Сжатие

В прошлом примере, мы посмотрели, как изображение при наведении курсора мыши увеличивается. Рассмотрим обратный эффект. Этот метод в целом точно такой же, только на этот раз вы начнете с размеров в 400px и при наведении курсора уменьшите их на 300 пикселей.

HTML

CSS

Боковое панорамирование

В следующем эффекте размер изображения не меняется, но при наведении фотография перемещается в сторону. Это хороший способ, чтобы подчеркнуть движение объекта.

HTML

Здесь мы используем изображение шириной 600px и высотой только 300px — мы изменяем горизонтальное положение фотографии и нам не нужно применять эффекты к высоте.

CSS

Для создание эффекта панорамирования мы не будем изменять размер изображения, как это делали в прошлый раз, но вместо этого, используя margin, будем размещать изображение левее. Если вы хотите, чтобы изображение перемещалось вправо, используйте margin-right.

Вертикальное панорамирование

Чтобы передать эффект движения, будем еще раз использовать этот эффект — он также подходит для создания вертикального панорамирования.

HTML

CSS

Код практически такой же, как и в прошлый раз, только теперь вместо margin-left мы используем margin-top.

Трансформация

Следующие эффекты более динамичны.

Наклон

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

HTML

CSS

Как вы можете видите, все, что нам нужно было — повернуть изображение на десять градусов. Просто и эффективно!

Скругление углов

Когда пользователь наводит на изображение, оно начинает вращаться, при этом превращаясь из круга в квадрат.

HTML

CSS

Здесь установлен класс morph, который начинает вращаться на 360 градусов при наведении курсора мыши на него, а border-radius будет постепенно изменяться до 50%, в результате чего превратится в круг.

Фокус

Вот еще один способ использования border-radius для закругления изображения. На этот раз, однако, мы будем не только увеличиватьborder-radius, но и его толщину. В сочетании с border-box, это создаст эффект, который фокусируется на определенной части изображения.

HTML

CSS

Мы взяли border 10px и превратил его в 70px черную рамку при проворачивании радиусе до 50%, как мы это делали в предыдущем примере.

Webkit-фильтры

В отличие от приведенных выше примеров, каждый из которых использует несколько префиксов, чтобы обеспечить максимальную совместимость браузера, следующие примеры используют только префикс WebKit. Данные примеры работают только в Safari и Chrome. Несмотря на ограничения, Webkit-фильтры позволяют выполнять некоторые довольно удивительные эффекты! Демо

Размытие

Первый эффект, который мы будем применять, — простое размытие. Теперь размытия можно добиться с помощью одной маленькой строки кода.

HTML

CSS

Как вы видите, мы используем -webkit-filter , а затем устанавливаем размытие blur 5px.

B&W

На этот раз мы собираемся снизить насыщенности изображения при наведении на него курсора мыши. Раньше, чтобы добиться такого результата, нужно было использовать два изображения, но с фильтрами Webkit, мы можем сократить до одного.

HTML

CSS

Здесь для grayscale было установлено значение 100%.

Яркость

Для нашего последнего эффекта, мы будем затемнять фото по умолчанию, а затем возвращать его в нормальное состояние при наведении курсора мыши.

Изменить фоновое изображение при наведении с эффектом затухания HTML CSS

Задай вопрос

спросил 2 года 10 месяцев назад

Изменено 2 года, 10 месяцев назад

Просмотрено 2к раз

Я хочу установить два фоновых изображения в div, а затем заставить их меняться при наведении курсора с эффектом затухания, подобным этому.

 .малыш {
максимальная ширина: 50%;
должность: родственница;
}

.детское изображение {
дисплей:блок;
непрозрачность:1;
высота: авто;
переход: легкость .6s;
ширина:100%;
положение: абсолютное;
z-индекс: 12;
}
.детское изображение: наведение {
непрозрачность:0;
}
.детское изображение + изображение {
дисплей:блок;
непрозрачность:1;
должность: родственница;
z-индекс: 10;
} 

 <дел>

 pixabay.com/photo/2017/12/16/16/37/гора-3022908_960_720.jpg" alt="Детский" itemprop="изображение" />

 тело {
  поле: 0 авто;
  ширина: 100%;
  высота: 100вх
}
.оставил{
  плыть налево;
}
.правильно{
  поплавок: справа
}

.col-половина ширины {
  ширина: 50%;
  высота: 100вх;
}

.проект-01{
  фон: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') не повторяющийся центр;
  размер фона: обложка;

  }

.проект-02{
  фон: URL('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720. jpg') бесповторный центр;
  размер фона: обложка;
}
.проект-01,
.project-02 изображение{
  максимальная ширина: 100%;
} 

 <дел>
 

 тело{
  поле: 0 авто;
  ширина: 100%;
  высота: 100вх
}
.оставил{
  плыть налево;
}
.правильно{
  поплавок: справа
}

.col-половина ширины {
  ширина: 50%;
  высота: 100вх;
}

.проект-01{
  фон: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') не повторяющийся центр;
  размер фона: обложка;
  переход: 0,5 с;

  }

.проект-01:наведите{
  фон: URL('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.  jpg') бесповторный центр;
  размер фона: обложка;
}
.проект-01,
.project-02 изображение{
  максимальная ширина: 100%;
} 

 <дел> 

 корпус {
  поле: 0 авто;
  ширина: 100%;
  высота: 100вх
}

.оставил {
  плыть налево;
}

.правильно {
  поплавок: справа
}

.col-половина ширины {
  ширина: 50%;
  высота: 100вх;
}

.проект-01 {
  фон: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') не повторяющийся центр;
  размер фона: обложка;
  отображение: встроенный блок;
  положение: родственник;
}

div.
 
 innerAnimate {
  фон: URL('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') бесповторный центр;
  размер фона: обложка;
  положение: абсолютное;
  сверху: 0;
  слева: 0;
  справа: 0;
  внизу: 0;
  непрозрачность: 0;
  z-индекс: 0;
  переход: 0,5 с;
}

.project-01: наведите указатель мыши на div.innerAnimate {
  непрозрачность: 1;
}

.проект-01,
.project-02 изображение {
  максимальная ширина: 100%;
}

div.innerContent {
  белый цвет;
  отступ: 20pt;
  положение: родственник;
  z-индекс: 100;
} 

 <дел>
  <дел>
  <дел>
    
Мои материалы здесь.