Затемнение при наведение на блок css
Всё актуальнее стало использование красивых эффектов при наведение. Ниже приведен пример простой реализации с помощью html+css.
Должно получиться что-то подобное, справа:
HTML текст
CSS стили
.wrapper-blockhome < margin-top: -197px; margin-left: 100px; position: relative; width: 300px; height: 491px; >.block2 < position: absolute; left: 0; bottom: 0; right: 0; top: 0; >.cover-home < width: 320px; border: 1px solid #787878; box-shadow: 5px 9px rgba(0,0,0,.2); display: block; >.block2-bg < position: absolute; left: 0; bottom: 0; right: 0; top: 0; display: none; >.img-search < width: 40%; opacity: 0; display: block; margin: 200px auto; >.wrapper-blockhome:hover .block2 < background-color: rgba(0,0,0,.8); transition: all 1s; >.wrapper-blockhome:hover .block2-bg < display: block; >.wrapper-blockhome .block2:hover .cover-home < opacity: 0.5; transition: all 1s; >.wrapper-blockhome .block2:hover .img-search
Также читайте:
- Как адаптировать сайт под iPad и другие планшеты »
- « Продвижение блога с помощью Email маркетинга
© 2010 – 2023 Веб-студия «MSN» – С нами покоряются вершины.
Ознакомится с договором или скачать бриф для заполнения.
Как сделать затемнение при наведении css
Ховер эффект на карточках и плитках делает страницу интерактивной и помогает управлять вниманием пользователя
ПОПУЛЯРНЫЕ ПРИЕМЫ ХОВЕР ЭФФЕКТА ДЛЯ КАРТОЧЕК И ПЛИТОК
Улучшает читабельность текста на изображении при наведении
Акцентирует внимание на карточке, добавляет интерактивность
Текст не перебивает изображение и появляется только при наведении
Добавит интерактивность и привлечет внимание зрителя
Делает карточку интерактивной, подходит для демонстрации товаров
Добавляет интерактивность и управляет вниманием зрителя
Появление тени
Затемнение фильтра
Появление контента
Изменение масштаба
Смена изображения плитки
Смещение карточки
Наведите на плитки, чтобы увидеть анимацию появления контента при наведении
Our courses are about:
Photography
Calligraphy
VR developing
Content is seen by hovering
Animation from below
Increase while hovering
Speed — fast
Color filter #000000
Opacity — 100–80%
Cards — Block TE100
Animation in hover
Наведите на карточки, чтобы увидеть появление тени при ховере
We can realize your ideas
We research
We can estimate your company opportunities, explore your economic status, analyze your vehicle access and foot traffic.
We develop strategies
We develop the main conception of a company according to its target, develop strategies of competitive advantage.
We create business concepts
We develop strategy, conception, and ideology of the project, offer you a city-planning idea.
Shadow animation while hovering 20px
Opacity 10%
Без сдвига
Services — Block SV202
Animation while hovering
Ховер эффект — смещение
изображения карточки
Yoga classes
Massage & SPA
Our salon services
Event — On Hover
Duration 0.1
Move x/y — 0/-15
Нулевой блок
Пошаговая анимация
Наведите для замены изображения в карточке при ховере
A new collection
Force Majeure black
Gracechapel t-shirt
Force Majeure white
Настройки блока
Выбрано «Показывать второе изображение при наведении»
Магазин — блок ST300
Анимация при наведении
Наведите на плитки, чтобы увидеть анимацию затемнения фильтра
Portfolio projects
Summer zine collection
Photography
Контент виден при наведении
Увеличение при наведении
Скорость — быстро
Цвет фильтра #1b1680
Прозрачность — 100–100%
Плитка и ссылка — Блок TE100
Анимация при наведении
Наведите для анимации увеличения или уменьшения карточки
Branding & package
Lettering for brands
Portfolio cases
Salt water. Zin for SLV magazine
Event — On Hover
Duration 0.3
Scale 93%
Всплывающая подпись к картинке при наведении с помощью CSS3
Готовых решений создания динамичных подписей к картинкам, появляющихся при наведении курсора на тело изображения, существует на сегодняшний день предостаточно. Однажды мы уже рассматривали один замечательный вариант, подробнейшим образом. Все они хороши по своему, какие-то отличаются простотой исполнения, другие наличием различных эффектов появления подписей. В общем, кому оно надо, тот всегда сможет найти для себя подходящий вариант.
Сегодня хочу продемонстрировать ещё один, наверное один из самых простейших примеров, реализации всплывающей подписи к изображению при наведении, выполненный исключительно средствами CSS3, без подключения javascript.
Посмотреть результат, а также поэкспериментировать с параметрами, вы можете непосредственно в онлайн-редакторе, представленном ниже:
HTML Разметка
div class="thumbs"> img src="/files/responsive-images-demo/images/image02.jpg"/> div class="caption"> span class="title">Заголовок картинкиspan> span class="info">Краткое описание или анонс записиspan> div> div>
Стили CSS
.thumbs width: 100%; max-width: 450px; /* опционально */ margin: 10px; opacity: .99; overflow: hidden; position: relative; border-radius: 3px; cursor: pointer; -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); > .thumbs:before content: ''; background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%); width: 100%; height: 50%; opacity: 0; position: absolute; top: 100%; left: 0; z-index: 2; -webkit-transition-property: top, opacity; transition-property: top, opacity; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; > .thumbs img display: block; width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ backface-visibility: hidden; -webkit-backface-visibility: hidden; > .thumbs .caption width: 100%; padding: 20px; color: #fff; position: absolute; bottom: 0; left: 0; z-index: 3; text-align: center; > .thumbs .caption span display: block; opacity: 0; position: relative; top: 100px; -webkit-transition-property: top, opacity; transition-property: top, opacity; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0s; transition-delay: 0s; > .thumbs .caption .title line-height: 1; font-weight: normal; font-size: 18px; > .thumbs .caption .info line-height: 1.2; margin-top: 5px; font-size: 12px; > .thumbs:focus:before, .thumbs:focus span, .thumbs:hover:before, .thumbs:hover span opacity: 1; > .thumbs:focus:before, .thumbs:hover:before top: 50%; > .thumbs:focus span, .thumbs:hover span top: 0; > .thumbs:focus .title, .thumbs:hover .title -webkit-transition-delay: 0.15s; transition-delay: 0.15s; > .thumbs:focus .info, .thumbs:hover .info -webkit-transition-delay: 0.25s; transition-delay: 0.25s; >
Очень надеюсь, что этот небольшой набор правил CSS (сниппет), кому-нибудь да пригодится в работе. Возникнут какие-либо вопросы, или всплывёт какая-то ошибка, пишите в комментариях.
С Уважением, Андрей .
Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 65
web11 : 9 октября, 2014 в 01:07 Спасибо, добавил в закладки Ответить
Анастасия : 9 октября, 2014 в 15:56 Еще одна полезная штука =)
Я уже соскучилась даже по новым записям))
Спасибо) Ответить
driver : 9 октября, 2014 в 18:01 Спасибо Анастасия за отзыв. Ответить
Дима : 28 марта, 2015 в 07:09 Спасибо, добавил себе Ответить
Виталий : 14 апреля, 2015 в 00:27 Доброго дня.
Уже 3 дня и 3 ночи бьюсь — не могу понять, как вставить необходимую картинку или как применить эффект к конкретной картинке. Подскажите, пожалуйста! Ответить
Андрей : 21 апреля, 2015 в 19:39 Замените урл из примера (placehold.it/250×250″) на адрес расположения Вашего изображения. Ответить
Виталий : 22 апреля, 2015 в 06:05 Спасибо! Ответить
Кнстантин : 30 апреля, 2015 в 02:39 У меня данный пример отображается как два отдельных блока, один под другим.
блок с картинкой и ниже блок с текстом. Ответить
Андрей : 30 апреля, 2015 в 14:40 Попробуйте использовать код из онлайн-редактора (шаблон изобр-я перед /* html разметка */ — переключатель html), либо самостоятельно поэкспериментировать с вложенностью /**/. Ответить
Пульсар : 17 мая, 2015 в 21:20 Спасибо, обновил дизайн изображений на своем сайте) Ответить
Анастасия : 2 июня, 2015 в 14:53 Подскажите пожалуйста, воспользовалась вашим кодом,всё получилось. Но у меня на сайте эта картинка должна стоять посередине,пытаюсь её сместить ,выходит только справа или слева(
И рядом с картинкой должен быть текст справа или слева(тоже не получается( смещается или вверх или вниз( Ответить
dimogur : 1 августа, 2015 в 20:17 Почему две картинки друг про другом, почему сразу правильный код в примере указать нельзя? найди ошибку называется! Ответить
driver : 1 августа, 2015 в 21:07 Где вы в примере увидели две картинки? Код в примере правильный, именно для демонстрации одной картинки. Если вы не в состоянии выстроить изображения в ряд, то просто спросите, а не гните пальцы.
Добавьте в стили: .img_block
.img_block С маржой определитесь как вам нуна, 5px это в качестве примера. Живой пример: тынц Ответить
James Bond : 17 марта, 2018 в 17:57 Спасибо огромное!
Именно то, что хотел! Ответить
Westus : 29 августа, 2015 в 17:48 У меня тень накладывается и на всплывающий текст. Как исправить? Ответить
driver : 29 августа, 2015 в 18:31 Значение свойства z-index у тени .over_block должно быть меньше чем у текста в теге span Ответить
Андрей : 19 октября, 2015 в 16:17 Здравствуйте! Ув. driver
Подскажите как с Вами можно связаться? Помощь Ваша нужна. Спасибо! Ответить
driver : 19 октября, 2015 в 17:55 Здравствуйте! Связаться со мной можно через форму обратной связи, на странице «Контакты» Ответить
Светлана : 23 ноября, 2015 в 14:06 еще бы знать куда это вписывать, перед или после каких слов? Пользуюсь BLOGGER Ответить
Борис : 16 марта, 2016 в 11:51 Здравствуйте, вопрос следующий: Как сделать чтобы панель выезжала сверху вниз?
Пытался сделать, она выезжает, но содержимое span всегда выводится…
Как я сделал Ответить
driver : 16 марта, 2016 в 15:56 Здравствуйте, Борис.
Примерно так: см. пример Ответить
Борис : 17 марта, 2016 в 09:27 Спасибо, за помощь! Ответить
Karat7 : 8 апреля, 2016 в 17:34 Сверху бы еще текста добавить на всплывающем фоне. Ответить
Александр : 30 июня, 2016 в 13:19 Здравствуйте. Я только учусь — хочу сделать карту регионов РФ, чтоб при наведении на регион появлялось его название. Ответить
Артем : 23 июля, 2016 в 15:32 Здравствуйте.Как сделать чтоб фон который появляется как и подсказка были круглыми ? Ответить
Дмитрий : 21 августа, 2016 в 14:05 Добрый день,
А вас не смущает использование блочного элемента внутри строчного ? Ответить
driver : 21 августа, 2016 в 19:43 День добрый.
Да конечно, банальная невнимательность, для примера планировал обнести ссылкой только картинку или разместить ссылку в подписи. Дабы не смущать смущаемых, исключил ссыль из примера. Ответить
Михаил : 10 октября, 2016 в 00:31 Огромное спасибо!
Отличная фишка!
Всё работает) Ответить
Андрей : 2 ноября, 2016 в 09:59 Дружище! Фишка крутая бесспорно, но я не могу понять куда ссылку ткнуть( Ну то есть мне нужно что бы при клике на изображение можно было перейти на другую страницу сайта Ответить
driver : 2 ноября, 2016 в 11:20 Просто обнесите ссылкой картинку:
Ответить
Алёна : 15 ноября, 2016 в 06:00 Здравствуйте. Скажите как сделать что бы было допустим три картинки по горизонтали и выровнено по центру страницы, у меня не как не получается это организовать в стилях прописала .img_block
Посоветуйте как мне поступить заранее Вам благодарна за помощь! Ответить
MARSHAL327 : 20 мая, 2017 в 16:37 Здравствуйте, у меня такая ситуация есть четыре картинки, надо сделать так чтобы две картинки были на одной строчке, а другие две на другой строчке. Ответить
driver : 20 мая, 2017 в 18:00 Здравствуйте, примерно так: см.пример Ответить
MARSHAL327 : 20 мая, 2017 в 18:42 большое спасибо! Ответить
Ната : 2 июля, 2017 в 20:07 Добрый день!
Вы меня простите, но я вообще полный чайник в этой теме (только ради сайта приходится вникать во все эти айтишные вещи).
Если есть возможность, подскажите в какой файл вордпресс вставить вот это:
Заголовок картинки
Краткое описание или анонс записи Ответить
Ната : 2 июля, 2017 в 20:12 Почему-то не отобразилось.
Если есть возможность, подскажите в какой файл вордпресс вставить вот это: Заголовок картинки
Краткое описание или анонс записи Ответить
Ната : 2 июля, 2017 в 20:13 В общем html разметку) Ответить
driver : 2 июля, 2017 в 21:04 Здравствуйте, Ната.
Поверьте, на данном этапе, вашему блогу не нужны такие плюшки, всё и так выглядит вполне гармонично с содержанием. Развернёте галерею, или будете использовать изображения в качестве превьюшек для статей, тогда и прикрутите какую-нибудь фишку вроде этой, или же воспользуетесь специальным плагином, коих предостаточно наштамповано для wp.
А пока, пишите, у вас это получается )). Ответить
Ната : 2 июля, 2017 в 21:23 Спасибо вам большое за вдохновляющий ответ!) Постараюсь воспользоваться вашим советом) Ответить
Вадим : 10 июля, 2017 в 12:22 Добрый день! не подскажите как сделать что бы и картинка и внизу выезжающее поле с надписью были ссылками? так как если ставлю ссылку на картинку то нижняя область не кликабельна. заранее спасибо! Ответить
driver : 11 июля, 2017 в 20:04 День добрый.
Самое простое, это всё что внутри div «обнести» ссылкой, включая картинку и div с подписью Ответить
Дмитрий : 8 августа, 2017 в 18:59 Здравствуйте! Подскажите как сделать отображение постоянным, так сказать отменить действие hover? Ответить
driver : 8 августа, 2017 в 19:39 Примерно так: см.пример Ответить
Дмитрий : 8 августа, 2017 в 19:59 Спсибо большое, а как еще оставить затемнение как при появлении hover? На светлых картинках текст не видно. Ответить
driver : 8 августа, 2017 в 20:13 Ответить
Дмитрий : 8 августа, 2017 в 20:17 Ответить
Игорь : 7 сентября, 2017 в 02:09 Спасибо! отлично подошло, подскажите, как можно сделать чтобы всплывающая запись не перекрывала ссылку? то есть моя картинка, на которую наложил подпись, это и есть ссылка, и там где запись вылезает, уже по ссылке не перейти, картинка становится некликабельной. Ответить
driver : 7 сентября, 2017 в 21:15 Отвечал на подобный вопрос ранее: тынц Ответить
Игорь : 7 сентября, 2017 в 22:11 Упс, спасибо) заработало, не заметил что есть комменты на других страницах. Ответить
Никита : 11 сентября, 2017 в 01:28 Андрей, приветствую!
Как отрегулировать настройки сниппета для фотографии с параметрами: width=”938″ height=”369″? Пробовал, но не получилось. Может ли поле с текстом быть ссылкой, или только вся картинка в целом?
Благодарю за ресурс.
С уважением etc) Ответить
Одесса-мама : 26 октября, 2017 в 22:32 А, как сделать, чтоб текст всплывал облаком в определенном месте? Ответить
Андрей : 5 декабря, 2017 в 06:16 здравствуйте! Скажите как сделать с помощью css всплывающую картинку, но так что бы при увеличении под низом были маленькие другие картинки, которые при выборе их открывались вместо той которая показана при нажатии, типа как на сайтах продажи авто Ответить
Георгий : 29 октября, 2018 в 20:09 Столкнулся со странностью.
В разных браузерах ведет себя по разному.
В опера меняет размер картинки, но описание дает под ней.
В хроме и эксплорере все работает, но невозможно поменять размеры картинки.
Как решить? Ответить
Антон : 5 февраля, 2019 в 14:27 зачем двойные тени в box-shadow? Ответить
driver : 5 февраля, 2019 в 19:52 а вот )) Ответить
Егор : 20 февраля, 2019 в 17:38 Добрый день!
Как можно сделать, чтоб надпись появлялась из центра, а не снизу? Ответить
driver : 21 февраля, 2019 в 01:49 Примерно так: тынц
Рамку, при желании, можно убрать, исключив свойство border из селектора .img-box:after Ответить
Ксения : 8 мая, 2019 в 16:03 Здравствуйте! Подскажите, пожалуйста, как сделать, чтобы было несколько таких элементов выровненных по горизонтали? Ответить
Валерий : 1 июня, 2019 в 20:47 Здравствуйте!
Подскажите, пожалуйста, как сделать, чтобы Заголовок был всегда внизу картинки, а краткое описание появлялось при наведении? Ответить
driver : 1 июня, 2019 в 22:47 Здравствуйте!
Найдите селектор .thumbs .caption .title и определите пару свойств:
top: 0;
opacity: 1;
Получится примерно так: Тынц
С цветом текста, фоном, отступами, позиционированием заголовка и описания(поменять местами, например), думаю разберётесь сами, выставите в соответствии с вашими требованиями.
Так же можете изучить урок по фиксированным подписям к изображениям, взяв за основу оба этих решения, с подписями можно будет вытворять всё что угодно. Ответить
Валерий : 2 июня, 2019 в 12:45 Добрый день!
Неожиданно быстрый и исчерпывающий ответ. Благодарю! Ответить
Георгий : 10 июня, 2019 в 16:58 День добрый.
На картинке снизу появилась полоса, хотя на первоисточники этого нет. Вопрос, как убрать полосу
? Ответить
Георгий : 11 июня, 2019 в 12:02 День добрый.
Подскажите как избавиться от белой рамки в низу изображения. Ответить
Аня : 1 ноября, 2019 в 15:37 а как создать сам дизайн этого окна в photoshop cc. скажите, пожалуйста.
или, может, его можно создать, как pop up?? Ответить