Как при наведении на картинку сделать эффект затемнения?
Как при наведении на картинку сделать эффект затемнения с иконкой из картинки png в середине?
Пример на картинке.
- Вопрос задан более трёх лет назад
- 63032 просмотра
- Вконтакте
Стандартно же, на любом сайте можно посмотреть реализацию.
Обертка или ссылка, внутри изображение:
дальше используются псевдоэлементы:
Второй вариант (больше подходит если вн. есть еще и текст описание):
Стили примерно те же:
- Вконтакте
- Вконтакте
- Вконтакте
Вариант №2 предпочтительнее так-как более лаконичный.
К обоим вариантом добавил анимацию через transition.
Центровку текста и иконки во втором осуществил с помощью flex (а в первом через background center center).
- Вконтакте
вешать hover на обертку img, при наведении иконку делать visibility: visible.
- Вконтакте
- Вконтакте
Но иконка будет тоже прозрачной. Чтобы это устранить нужно сделать картинку нужной прозрачности и фоном добавить к блоку. По умолчанию скрывающейся блок display: none, а чтобы появился пишем это .img-block:hover .hover-block <
display: block;
>
Ну и добавить время,чтобы это было плавно.
CSS эффект при наведение на картинку
В данном уроке продолжаем работать с CSS, реализуем красивый эффект при наведение на картинку где она плавного поворачивается с затемнением, а на фоне ее появляется обводка и текстовые заголовки.
See the Pen EbdNyb by Denis (@Dwstroy) on CodePen.
CSS эффект описываем каркас блоков для трансформации
Скачиваем подготовленный шаблон, в нем два файла, Index в котором подключен CSS. В CSS сбросили отступы, установили шрифт, и подключили на задний фон изображение. В самой папке /img лежат два файла, фон и картинка для примеры.
Описываем все блоки, которые нужно вывести на страницу, и заполняем их текстовым содержанием.
Описываем основные стили картинки / эффект на css
Задаем блоку с картинкой фиксированную ширину и высоту, а при помощи overflow: hidden , скрываем все лишнее за ее пределами, добавляем курсор.
Позиционируем для удобства блок посередине экрана.
Затем картинке делаем ширину в 100% и вешаем плавное анимирование в пол секунды.
Далее трансформируем, немного разворачиваем rotate(-10deg) , и увеличиваем в размере scale(1.3) .
Задаем фильтр размытия в 1 пик. filter: blur(1px) и затемним фон, а для этого допишем классу .blocImg черный фон, а при наведении саму картинку делаем на половину прозрачной opacity: .5; .
Теперь приступим к стилилизации текста.
Оформляем текстовое содержание блока
Абсолютно родителя позиционируем блок с текстом .blocText и задаем отступы по всем краям в 30 пик. По рамке в дальнейшем сделаем анимированное ее появление.
Для текста задаем белый цвет, делаем заглавными буквами, устанавливаем padding по краям.
Заголовку второго уровня задаем 25 пик.
Вторую его часть делаем оранжевым цветом, устанавливаем отступы с низу для черты, и делаем нижнее подчеркивание в 2 пик .
Параграф позиционируем абсолютно, опускаем его на 180 пик. задаем ширину его блока в 250 пик. Добавляем с левой стороны border в 4 пик. и задаем внутренние отступы.
Описываем псевдоэлементы ::before и ::after
Уберем обводку outline , которую до этого задавали классу .blocText и зададим ее для псевдоэлементов.
Создаем псевдоэлементы ::before ::after , описываем их основные стили.
Позиционируем их абсолютно, задаем ширину и высоту по 100% и платное появление в пол секунды.
Отдельно ::before присваиваем бордюр с верху и низу в 1 пик. и задаем трансформацию для оси Х transform: scale(0,1) .
Тоже самое делаем для ::after только бордюр теперь с левой и правой стороны, а трансформация по оси Y
А для их появления, трансформацию для всех осей указываем в 1.
И остается скрыть текст, для этого классу .text присвоим opacity: 0 и добавим плавное его появление.
А по наведении текст отображаем.
В конечном итоге получили классный Hover Effects при наведение на картинку.
Кому видео было интересно, делитесь им с друзьями в социальных сетях, и не забывайте при этом комментировать.
Урок подготовил Горелов Денис.
Оставить комментарий:
Отзывы
Здравствуйте, подскажите пож-та что прописать в файле style.css что бы описание картинки было только при наведении курсора, а то описание расширяет рамку и смотрится не красиво. Вот содержание:
/* set some basic CSS for NextGEN Download Gallery */
.ngg-download-frm hr <
display: block;
float: none;
clear: both;
background: transparent;
border: none;
border-bottom: 1px solid #ccc;
padding-top: 1em;
margin: 1em auto;
>
Юрий
CSS — затемненные картинки при наведении осветляются
Пять строк CSS кода без использования JavaScript и прочих языков. Затемненная картинка при наведении курсора становится светлой.
Полезное решение, когда необходимо спрятать счетчики веб-аналитики или сделать их менее заметными.
HTML разметка
CSS. По умолчанию затемнены
CSS. По умолчанию не затемнены
Как вы уже могли догадаться, за тень отвечает стиль opacity, который накладывает на объект не тень, а прозрачность. Значение параметров колеблется от 0 — полная прозрачность до 1 — 100% непрозрачности.
Darken background image on hover
How would I darken a background image on hover without making a new darker image?
15 Answers 15
Similar, but again a little bit different.
Make the image 100% opacity so it is clear. And then on img hover reduce it to the opacity you want. In this example, I have also added easing for a nice transition.
Thank you Robert Byers for your jsfiddle
How about this, using an overlay?
I was able to achieve this more easily than the above answers and in a single line of code by using the new Filter CSS option.
It’s compatibility in modern browsers is pretty good — 95% at time of writing, though less than the other answers.
If you want to darken the image, use an overlay element with rgba and opacity properties which will darken your image.
Note: Am also using CSS3 transitions for smooth dark effect
If anyone one to save an extra element in the DOM than you can use :before or :after pseudo as well..
Using some content over the darkened overlay of the image
Here am using CSS Positioning techniques with z-index to overlay content over the darkened div element. Demo 3
you can use this:
Here is a "shade" class that you can add directly to any <img> tag like so
Try following code:
You will get darken
The simplest way to do it without adding an extra overlay element, or using two images, is to use the :before or :after selector.
This will not work in older browsers of course; just say it degrades gracefully!
If you have to use the current image and get a darker image then you need to create a new one. Else you can simply reduce the opacity of the .image class and the in the .image:hover you can put a higher value for opacity. But then the image without hover would look pale.
