Как изменить цвет картинки при наведении css

Change image background color on hover

Please take a look at this example of how it should look:

Please help me how to change image background color on hover, this is my code, as you can see in example above, color should be transparent

6 Answers 6

Use the alpha channel and a negative z-index

First, you need to select the right element: li:hover .image .

Secondly, you need to use rgba colors to achieve transparency.

Thirdly, push the actual images to the back:

Working example:

Change background on a tag instead of img . Adjust color & opacity accordingly

To make it work on hovering over text use this code [ li is parent of text and image both so it should work fine]

If you try this now you will see gap below images . Its only viewable on stackoverflow . When you will directly run this in browser you wont see any it.

I have checked with Chrome, Firefox and Opear there is not gap below images

If for some reason you do see it. you can easily adjust it with margin/padding

I was able to achieve the effect using two divs:

I have taken your code and edited it and produced a workable result from reading this article after a few minutes on Google: https://css-tricks.com/tinted-images-multiple-backgrounds/

The result is done thus:

• Place the image in the CSS rather than as an <img> element because as an element it will always be on top, or more fiddly layers will be required.
• A downside of this is that a new set of CSS rules (copy/paste) will be required for each image but will each have a custom image associated (for each of your button links)
• The HTML has been simplified and all CSS is associated directly with the anchor link, the image is anchor link CSS rather than a child element.
• The actual colour change effect is caused by making a pseudo-gradient in the image, gradient being from- and to- the same colour so being uniform.
• I could not make this work this way without using the pseudo-gradient effect, ie using straight rgba() values, on codepen.

I strongly suspect there is a better way of doing this. But this appears to be what you are looking for. A better way IS shown by adding an opacity value, as in Akash Kumar’s answer.

My Code:

First, you cannot change image background color with CSS (at least the basic CSS properties), it is the containers background color you can change and in HTML the image has a higher priority so the background color of the containing div , ul , li might change with your CSS rules but you will not be able to see it.

My opinion: I think the effect you want is an overlay on the image on hover. You can have an hidden div that will become visible with a slightly transparent property that will make it look like an overlay.

From the CSS styling, you might need some javascript

Amazingly you were so close to fixing it your way. Here is the hack

instead of your a:hover img

Note: the hover only affects the img property so if you hover over the text you might not see any overlay effect (you could edit the CSS to make that work though.)

Как изменить цвет картинки при наведении указателя мыши с помощью CSS?

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

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

HTML код:

Код 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 свойства с вендорными префиксами, чтобы эффект одинаково работал в различных браузерах.

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

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

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

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

Порекомендуйте эту статью друзьям:

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

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Девять простых примеров CSS3 анимации

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

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

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

Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

• @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
• animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer	Поддерживается версией IE 10 и выше
Chrome	Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox	Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera	Поддерживается с версии 12.1
Safari	Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )

Мобильные браузеры
iOS Safari & Chrome	Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile	Поддерживается с версии 12.1
Android Browser	Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android	Поддерживается с версии 47/44
Internet Explorer Mobile	Поддерживается версией IE Mobile 10 и выше
UC Browser для Android	Поддерживается с префиксом -webkit-

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

Подключаем SVG-иконку на сайт и меняем цвет через CSS

HTML, CSS

В предыдущих сериях…

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

Возьмем стандартную папку с проектом, в которой есть отдельная папка для изображений, отдельная — для файлов .css , а также файл .html

Подключение через тег <img> в html

Работаем как с обычной картинкой. Тег <img> , атрибут src , прописываем путь к файлу. Можно использовать любые атрибуты <img> , включая атрибут width .

Подключение фона в .css

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

Так выглядит наш паттерн:

Укажите в html нужный класс и пропишите свойства фона background-image в файле css. Используйте функцию url() , чтобы задать путь к файлу с изображением.

Вот, что у нас получилось:

Описываем svg-графику inline

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

Тег <svg> используется как контейнер для хранения SVG графики. При помощи тега <path> и его атрибутов создается фигура. Посмотрите, как выглядит иконка YouTube в inline формате.