Как изменить цвет png при наведении - Исправление ошибок и поиск оптимальных решений проблем

Подскажите, как с помощью CSS, при наведении курсора, заменить цвет PNG-иконки (например, такой:
) с серого на красный.

задан 14 окт 2018 в 15:39

В CSS3 это возможно с помощью свойства filter:

img:hover {
  -webkit-filter: sepia(1) hue-rotate(320deg) saturate(10);
  filter: sepia(1) hue-rotate(320deg) saturate(10);
}

<img src="https://i.stack.imgur.com/rbcA9.png">

Цепочка фильтров такова (порядок важен!):

sepia — по сути, делает изображение монохромным с рыжим оттенком;
hue-rotate — вращение цветового круга до нужного оттенка;
saturate — насыщенность цвета.

Источник

Чтобы какой-либо цвет превратить в белый:

body { background: #ccc; }

img:hover {
  -webkit-filter: grayscale(100) brightness(200);
  filter: grayscale(100) brightness(200);
}

<img src="https://i.stack.imgur.com/jjpgK.png">

Здесь цепочка следующая:

grayscale — обесцвечиваем изображение;
brightness — устанавливаем яркость с заведомо завышенным значением.

ответ дан 14 окт 2018 в 18:59

UModeLUModeL

30.1k5 золотых знаков27 серебряных знаков65 бронзовых знаков

Подготовьте отдельный спрайт с иконками разных цветов (как показано ниже). В CSS-стилях зафиксируйте размеры блока. Задайте для блока фоновое изображение. У псевдокласса :hover пропишите смещение этого изображения равное высоте (или ширине) картинки. В результате получится элемент, который чуть-чуть изменяется при наведении указателя мыши.

.i-folder {
  height: 42px;
  width: 57px;
  background: url(https://i.stack.imgur.com/jjpgK.png);
}
.i-folder:hover {
  background-position: 0px 42px;
}

<div class="i-folder"></div>

ответ дан 14 окт 2018 в 20:17

mymediamymedia

8,4434 золотых знака28 серебряных знаков52 бронзовых знака

Поддержка браузерами: caniuse.com/#search=mask

div {
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-image: url('https://image.flaticon.com/icons/svg/1086/1086563.svg');
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #000;
}

div:nth-child(1) { background: linear-gradient(#e74c3c, #f1c40f); }
div:nth-child(2) { background-color: #1842de; }
div:nth-child(3) { background-color: #ffff00; }
div:nth-child(4) { background-color: #3498db; }
div:nth-child(5) { background-color: #9b59b6; }
div:nth-child(6) { background-color: #2ecc71; }

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

ответ дан 5 авг 2020 в 16:20

MoloFMoloF

4,3841 золотой знак14 серебряных знаков37 бронзовых знаков

Источник

I need to change the background color of an image. The image is a circle image with white background, I need when you hover over it change the background of the circle image to blue. I need only the circle to be change.

My HTML code is

<div class="fb-icon">
<a href="http://www.facebook.com/mypage" target="_blank">
<img src="images/fb_normal.png" alt="Facebook">
</a>
</div>

In CSS I wrote:

.fb-icon:hover {
    background: blue;
}

The above code gives me blue color but as a frame around the circle icon. what I need is to change the background of the circle itself. Imagine it’s like a signal it’s white when you hover by mouse it goes to blue.

Please I need a solution if it can be done by CSS or whatever. Sorry if I make it too long.

The problem: link

asked Jan 28, 2012 at 17:09

HTML ManHTML Man

9254 gold badges17 silver badges39 bronze badges

Ideally you should use a transparent PNG with the circle in white and the background of the image transparent. Then you can set the background-color of the .fb-icon to blue on hover. So you’re CSS would be:

fb-icon{
    background:none;
}

fb-icon:hover{
    background:#0000ff;
}

Additionally, if you don’t want to use PNG’s you can also use a sprite and alter the background position. A sprite is one large image with a collection of smaller images which can be used as a background image by changing the background position. So for eg, if your original circle image with the white background is 100px X 100px, you can increase the height of the image to 100px X 200px, so that the top half is the original image with the white background, while the lower half is the new image with the blue background. Then you set setup your CSS as:

fb-icon{
    background:url('path/to/image/image.png') no-repeat 0 0;
}

fb-icon:hover{
    background:url('path/to/image/image.png') no-repeat 0 -100px;
}

answered Jan 28, 2012 at 17:41

Sagar PatilSagar Patil

1,92812 silver badges21 bronze badges

It’s a bit late but I came across this post.

It’s not perfect but here’s what I do.

HTML Code

<div class="showcase-menu-social"><img class="margin-left-20" src="images/graphics/facebook-50x50.png" alt="facebook-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/twitter-50x50.png" alt="twitter-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/youtube-50x50.png" alt="youtube-50x50" width="50" height="50" /></div>

CSS Code

.showcase-menu {
  margin-left:20px;
    margin-right:20px;
    padding: 0px 20px 0px 20px;
    background-color: #C37500;
    behavior: url(/css/border-radius.htc);
  border-radius: 20px;
    }

.showcase-menu-social img:hover {
  background-color: #C37500;
  opacity:0.7 !important;
  filter:alpha(opacity=70) !important; /* For IE8 and earlier */
  box-shadow: 0 0 0px #000000 !important;
}

Now my border radius of 20px matches up exactly with the image border radius. As you can see the .showcase-menu has the same background as the .showcase-menu-social. What this does is to allow the ‘opacity’ to take effect and no ‘square’ background or border shows, thus the image slightly reduces it’s saturation on hover.

It’s a nice effect and does give the viewer the feedback that the image is in focus. I’m fairly sure on a darker background, it would have even a better effect.

The nice thing is that this is valid HTML-CSS code and will validate. To be honest, it should work on non-image elements just as good as images.

Enjoy!

answered Jul 18, 2013 at 7:00

An alternative solution would be to use the new CSS mask image functionality which works in everything apart from IE (still not supported in IE11). This would be more versatile and maintainable than some of the other solutions suggested here. You could also more generally use SVG.
e.g.

item { mask: url('/mask-image.png'); }

There is an example of using a mask image here:

http://codepen.io/zerostyle/pen/tHimv

and lots of examples here:

http://codepen.io/yoksel/full/fsdbu/

answered Aug 15, 2014 at 11:04

WillsterWillster

2,5061 gold badge32 silver badges32 bronze badges

If the icon is from Font Awesome (https://fontawesome.com/icons/)
then you could tap into the color css property to change it’s background.

fb-icon{
color:none;
}

fb-icon:hover{
color:#0000ff;
}

This is irrespective of the color it had. So you could use an entirely different color in its usual state and define another in its active state.

answered May 25, 2020 at 17:14

brytebeebrytebee

411 silver badge7 bronze badges

If I understand correctly then it would be easier if you gave your image a transparent background and set the background container’s background-color property without having to use filters and so on.

http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

Shows you how to use filters in IE. Maybe if you leverage something from that. Not very cross-browser compatible though. Another option might be to have two images and use them as background-images (rather than img tags), swap one out after another using the :hover pseudo selector.

answered Jan 28, 2012 at 17:13

backdeskbackdesk

1,7713 gold badges22 silver badges42 bronze badges

Ok, try this:

Get the image with the transparent circle — http://i39.tinypic.com/15s97vd.png
Put that image in a html element and change that element’s background color via css. This way you get the logo with the circle in the color defined in the stylesheet.

The html

<div class="badassColorChangingLogo">
    <img src="http://i39.tinypic.com/15s97vd.png" /> 
    Or download the image and change the path to the downloaded image in your machine
</div>

The css

div.badassColorChangingLogo{
    background-color:white;
}
div.badassColorChangingLogo:hover{
    background-color:blue;
}

Keep in mind that this wont work on non-alpha capable browsers like ie6, and ie7. for ie you can use a js fix. Google ddbelated png fix and you can get the script.

answered Jan 28, 2012 at 18:07

JuankJuank

5,9661 gold badge27 silver badges28 bronze badges

Use the background-color property instead of the background property in your CSS.
So your code will look like this:
.fb-icon:hover {
background: blue;
}

answered Sep 28, 2013 at 22:51

Oliver NiOliver Ni

2,5677 gold badges30 silver badges43 bronze badges

The best approach is to use a svg image in which the background would be a white rect and the foreground the circle, and set the hover property to the bg. It’s a vector graphic image so it will look fine on any screen size, not to mention that svg is meant to be used in the web. This svg should be just of some bytes and its rendered better than any raster or bitmap image.

answered Aug 4, 2021 at 0:19

Источник

My HTML code is

<div class="fb-icon">
<a href="http://www.facebook.com/mypage" target="_blank">
<img src="images/fb_normal.png" alt="Facebook">
</a>
</div>

In CSS I wrote:

.fb-icon:hover {
    background: blue;
}

Please I need a solution if it can be done by CSS or whatever. Sorry if I make it too long.

The problem: link

asked Jan 28, 2012 at 17:09

HTML ManHTML Man

9254 gold badges17 silver badges39 bronze badges

fb-icon{
    background:none;
}

fb-icon:hover{
    background:#0000ff;
}

fb-icon{
    background:url('path/to/image/image.png') no-repeat 0 0;
}

fb-icon:hover{
    background:url('path/to/image/image.png') no-repeat 0 -100px;
}

answered Jan 28, 2012 at 17:41

Sagar PatilSagar Patil

1,92812 silver badges21 bronze badges

It’s a bit late but I came across this post.

It’s not perfect but here’s what I do.

HTML Code

<div class="showcase-menu-social"><img class="margin-left-20" src="images/graphics/facebook-50x50.png" alt="facebook-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/twitter-50x50.png" alt="twitter-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/youtube-50x50.png" alt="youtube-50x50" width="50" height="50" /></div>

CSS Code

.showcase-menu {
  margin-left:20px;
    margin-right:20px;
    padding: 0px 20px 0px 20px;
    background-color: #C37500;
    behavior: url(/css/border-radius.htc);
  border-radius: 20px;
    }

.showcase-menu-social img:hover {
  background-color: #C37500;
  opacity:0.7 !important;
  filter:alpha(opacity=70) !important; /* For IE8 and earlier */
  box-shadow: 0 0 0px #000000 !important;
}

It’s a nice effect and does give the viewer the feedback that the image is in focus. I’m fairly sure on a darker background, it would have even a better effect.

The nice thing is that this is valid HTML-CSS code and will validate. To be honest, it should work on non-image elements just as good as images.

Enjoy!

answered Jul 18, 2013 at 7:00

item { mask: url('/mask-image.png'); }

There is an example of using a mask image here:

http://codepen.io/zerostyle/pen/tHimv

and lots of examples here:

http://codepen.io/yoksel/full/fsdbu/

answered Aug 15, 2014 at 11:04

WillsterWillster

2,5061 gold badge32 silver badges32 bronze badges

If the icon is from Font Awesome (https://fontawesome.com/icons/)
then you could tap into the color css property to change it’s background.

fb-icon{
color:none;
}

fb-icon:hover{
color:#0000ff;
}

This is irrespective of the color it had. So you could use an entirely different color in its usual state and define another in its active state.

answered May 25, 2020 at 17:14

brytebeebrytebee

411 silver badge7 bronze badges

http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

answered Jan 28, 2012 at 17:13

backdeskbackdesk

1,7713 gold badges22 silver badges42 bronze badges

Ok, try this:

The html

<div class="badassColorChangingLogo">
    <img src="http://i39.tinypic.com/15s97vd.png" /> 
    Or download the image and change the path to the downloaded image in your machine
</div>

The css

div.badassColorChangingLogo{
    background-color:white;
}
div.badassColorChangingLogo:hover{
    background-color:blue;
}

Keep in mind that this wont work on non-alpha capable browsers like ie6, and ie7. for ie you can use a js fix. Google ddbelated png fix and you can get the script.

answered Jan 28, 2012 at 18:07

JuankJuank

5,9661 gold badge27 silver badges28 bronze badges

Use the background-color property instead of the background property in your CSS.
So your code will look like this:
.fb-icon:hover {
background: blue;
}

answered Sep 28, 2013 at 22:51

Oliver NiOliver Ni

2,5677 gold badges30 silver badges43 bronze badges

answered Aug 4, 2021 at 0:19

Источник

4 ответа

Если вы ориентируетесь на современные браузеры, вы можете использовать фильтры CSS.

Фильтр hue-rotate подходит для изменения цветов:

filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);

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

Обратите внимание, что фильтры CSS — это новая функция, а поддержка браузера ограничена.

В качестве альтернативы вы можете использовать технику CSS sprites, которая работает во всех браузерах разумного возраста.

Alex Shesterov
24 фев. 2015, в 22:56

Что вам нужно сделать, это установить изображение в качестве фонового изображения с помощью CSS. Затем установите состояние зависания, используя другую версию изображения (с другим цветом). Например:

.element {
  background-image: url(your-image.png);
}

.element:hover {
  background-image: url(your-image-hover-version.png);
}

В зависимости от того, где вы помещаете образ/класс, вам необходимо назначить соответствующую высоту/ширину (или с помощью дополнения).

Richard Blyth
24 фев. 2015, в 22:56

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

HTML:

<div id="cf">
  <img class="bottom" src="/images/Windows%20Logo.jpg" />
  <img class="top" src="/images/Turtle.jpg" />
</div>

CSS

   #cf {
      position:relative;
      height:281px;
      width:450px;
      margin:0 auto;
    }

    #cf 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;
    }

    #cf img.top:hover {
      opacity:0;
    }

Подробнее здесь:
http://css3.bradshawenterprises.com/cfimg/

Kirk Powell
24 фев. 2015, в 23:02

Применение:

{color:red}

для любого элемента означает изменение цвета текста.

Попробуйте изменить:

img:hover {color:red}

img:hover {background-image: url('<insert url to red arrow here>');}

и это работает, если у вас есть только одно изображение. Если у вас много изображений, и вы хотите, чтобы только один изменялся при наведении, установите ID для изображения, которое вы хотите изменить, и измените img и img: наведите на #x и #x: наведите указатель мыши и замените x на имя, которое вы указали для идентификатор.

Здесь пример (предположим, что другой HTML неповрежден и правильно отформатирован):

<style type="text/css">
#abc:hover {background-image: url('redarrow.png');}
</style>    
<img ID="abc" src="normalarrow.png">

user4064342
24 фев. 2015, в 22:35

Ещё вопросы

1Запись аудио в Android
0Как отобразить данные JSON в календаре DatePicker с помощью Angularjs
0Таймер высокого разрешения Linux в многопоточной среде?
1FileIO из ArrayList
1JGit: состояние удаленного хранилища
1AutoMapper: максимальная глубина графика
1как долго нажимается клавиша в Java
1Приложение не может выполнить вход с помощью Office 365 API при развертывании для тестирования
0.htaccess всегда показывает 500 кодировщика внутренних ошибок сервера
0jQuery.extend и глючный IE не перечислимые реквизиты
0MSVCP110D.dll не найден
1Есть ли стандартный ImageViewer на Android?
1Папка / cache / recovery в андроиде
1Деструктуризация объекта параметра функции приводит к неопределенным переменным
0JQuery отложено не работает на Chrome и Safari?
0Доступ к значениям содержимого $ при создании темы Drupal
0PHP MYSQL запрос, поиск только в строках, где поле истинно
0Адаптируйте ширину 3-го блока подряд с помощью CSS
1питон — дубликат лототона на экстракторе
0Таблица MySql вне предела Исключение -1
0JS Установка атрибута onclick разными способами
1Транспортир — Запустить сервер Selenium на заданном порту
1Установите вызов Moq для защищенного виртуального метода, который ожидает Func и возвращает IEnumerable
0Таблица стилей CSS для разрешения
1Могу ли я иметь TableLayout в AppWidget?
0Почему EXISTS () всегда возвращает true?
0Передача данных на сервер с использованием JSON в Codeigniter
1Как заменить функцию в Python?
1PaintComponent через список объектов
1Конвертируйте необработанный TwoTuple в TwoTuple <A, B> неправильно, но не получили никаких предупреждений (Java Generics)
1Android ==> Eclipse Heap инструмент вопрос?
1Токен JWT, сгенерированный из c #, не совпадает с Javascript
1Кнопка Tkinter была нажата и запустить программное обеспечение Kodi?
1Синхронизировать реквизит в Vuejs
0Измените UL стиля выбора JQuery для работы без BootstrapJS
0Встроенный дисплей для div внутри div
1Android — написание приложений для еще не выпущенных устройств
1Spring amqp rabbitmq MessageListener не работает
1Не удалось загрузить myapp.apk
0Контент, который изменяет ширину с помощью анимированной боковой панели
1Это хорошее использование ?? оператор?
1QThread не обновляет представление событиями
0Неисправность добавления массива PHP
0html / javascript: предотвращение очистки значения <input> при отправке формы
1Отправка сообщений разных типов в Android-обработчик
1Почему кнопка сброса asp.net работает не так, как задумано?
0неявное преобразование String в Hash (гем smarter_csv, загрузка файла с указанием)
0Сервис MariaDB постоянно не запускается
0_mysql_exceptions.OperationalError
0Параметр конструктора ошибок C ++

Источник

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами. Связано это с тем, что при реализации таких эффектов используется псевдокласс :hover, который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class="animate1", тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity, которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X), так как они не поддерживают свойство opacity. Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами <head> и </head> html-файла нужно добавить следующий css-код:

На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов <img>, имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками { и }. Если все сделали правильно, то должно получиться примерно так:

Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:

img.animate1 {
   filter: alpha (Opacity=25);
   opacity: 0.25;
}
img.animate1:hover {
   filter: alpha (Opacity=100);
   opacity: 1;
}

Результат будет такой:

Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством CSS transition, которое устанавливает эффект перехода между двумя состояниями элемента. Добавим для примера одну секунду замедления. Тогда наш CSS код станет таким:

img.animate1 {
   filter: alpha (Opacity=25);
   opacity: 0.25;
   -moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
   -webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
   -o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
   transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
}
img.animate1:hover {
   filter: alpha (Opacity=100);
   opacity: 1;
}

Результат:

С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:

img.animate1{
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover{
— moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
— webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
— o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
— ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
transform: scale (1.5); /* эффект трансформации для других браузеров */
}

И результат будет таким:

К увеличению картинки можно добавить поворот. Тогда css стили немного изменяться:

img.animate1{
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover{
— moz-transform: rotate (360deg) scale (1.5);
— webkit-transform: rotate (360deg) scale (1.5);
— o-transform: rotate (360deg) scale (1.5);
— ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
}

Результат:

Выше мы рассмотрели случаи, когда в анимировании участвует одна картинка. Далее рассмотрим способы подмены одного изображения на другое. В этом случае обычно подготавливают два изображения одинакового размера: одно для исходного вида, другое для его подмены.

Допустим у нас есть две картинки, одна черно-белая другая цветная:

Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background. А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background. Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1:

И добавляем следующие описания стилей:

div.rotate1 {
background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
}
div.rotate1:hover {
background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
}

И результат:

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

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

В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position. Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент <a>. Тогда в html-страницу вставляем такой код:

А в css-файл такой:

a.rotate2 {
   background: url (img/button.png); /* Путь к файлу с исходным рисунком */
   display: block; /* Ссылка как блочный элемент */
   width: 50px; /* Ширина рисунка в пикселах */
   height: 30px; /* Высота рисунка */
}
a.rotate2:hover {
   background-position: 0 -30px; /* Смещение фона */
}

Результат:

И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute. В этом случае помещаем в контейнер div два изображения:

И добавим css-стилей:

.animate2{
position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
}
.animate2 img {
position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
}

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

.animate2 img.first { /* первая картинка полностью прозрачная */
opacity:0;
filter:alpha (opacity=0);
}
.animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */
opacity:1;
filter:alpha (opacity=100);
}
.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */
opacity:0;
filter:alpha (opacity=0);
}

Результат:

Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition:

.animate2:hover img.second, .animate2 img.second:hover {
opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

И результат:

А если добавить свойство transform:

.animate2:hover img.second, .animate2 img.second:hover {
opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
}

Получится так:

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

Источник

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

Вот как можно добиться данного эффекта с помощью только лишь CSS:

HTML код:

<img class="grayscale-image" src="https://avatars.mds.yandex.net/get-pdb/2001933/86554d64-6d18-4c6a-b2c8-2587c956774a/orig" />

Код CSS:

/* * у изображения с данным стилем цвет черно-белый */ .grayscale-image { -webkit-transition: 3s; -moz-transition: 3s; -ms-transition: 3s; -o-transition: 3s; transition: 3s; -webkit-filter: grayscale(100%); filter: grayscale(100%); }


/*

* при наведении курсора мыши применяем к изображению фильтр через css свойство filter

*/

.grayscale-image:hover

{

    -webkit-transition: 3s;

    -moz-transition: 3s;

    -ms-transition: 3s;

    -o-transition: 3s;

    transition: 3s;

    -webkit-filter: grayscale(0%);

    filter: grayscale(0%);

}

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

Создано 26.11.2019 13:49:29
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):