Изменение картинки при наведении CSS на адаптивной странице
Мне нужно, чтобы при наведении курсором картинка менялась, а в мобильной версии перемещалась вниз и адаптировалась под размер экрана. Вместо этого в мобильной версии изображение становится очень маленьким.
Так выглядит структура контейнера.
.picturesklava < text-decoration: none; outline: none; display: inline-block; padding: 12px 20px; margin: 10px 20px; >a.picturesklava < background: url("image/klava.jpg"); display: block; height: 100%; background-size: contain; background-repeat: no-repeat; >a.picturesklava:hover < background: url("image/komiks.jpg"); display: block; height: 100%; background-size: contain; background-repeat: no-repeat; >.picturesklava:hover
Изображения я вставила в виде спрайтов. При наведении картинка плавно меняется. При уменьшении экрана адаптируется под размер div. Но как только размер экрана уменьшается до col-xs, а div с картинкой расширяется на весь экран, картинка становится очень маленькой. Как сделать так, чтобы картинка на мобильном экране спускалась вниз и адаптировалась под комфортный размер?
Как сделать так, чтобы при наведении на одно изображение менялось другое?
Я хочу сделать так, чтобы при наведении на большой блок изображения (красно-белый), менялась бы картинка круга (которая внутри) на другое изображение круга. Вот, для наглядности, какой эффект я хочу получить: 
P.S Скорее всего это можно сделать через тильду, но у меня не получилось.
Отслеживать
задан 10 ноя 2016 в 14:10
user226023 user226023
51 1 1 серебряный знак 7 7 бронзовых знаков
для начала следует выложить свой код, с которым есть проблемы
10 ноя 2016 в 14:12
Как вариант — можно прикрутить JS, что при наведении (hover) на блок менять картинку. Но присоединюсь к комментарию выше — требуется код, с которым уже работать.
Эффект при наведении на картинку (CSS)
Как реализовать такой эффект при наведении? Картинка вставлена с помощью тега img
Отслеживать
задан 8 мая 2018 в 6:57
Walter Scott Walter Scott
75 6 6 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Для значка ссылки использовал иконку Font-Awesome, но в принципе её можно также задать картинкой или использовать собственный иконочный шрифт.
*, *:before, *:after < box-sizing:border-box; >.img-link < display:block; width:200px; height:200px; border:7px solid #fff; box-shadow:0 0 1px 1px gray; border-radius:50%; background:linear-gradient(145deg,#4a35c5,#ba13c5); position:relative; color:transparent; transition:all .5s ease; >.img-link:before < content:'\f0c1'; font-family:fontAwesome; font-size:40px; line-height:1; position:absolute; top:calc(50% - .5em); left:calc(50% - .5em); z-index:2; >.img-link img < display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; object-position:center; transition:inherit; >.img-link:hover < color:#fff; >.img-link:hover img
Отслеживать
ответ дан 8 мая 2018 в 8:42
10.4k 2 2 золотых знака 14 14 серебряных знаков 36 36 бронзовых знаков
Идеально, спасибо, галку поставил))
9 мая 2018 в 16:05
Вот таким образом:
.wrapper < position: relative; >.hoverEffect < position: absolute; opacity: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; transition: opacity 1s ease-in-out; top: 0; left: 0; margin: 6px; background-color: rgba(128,0,128, 0.6); >.wrapper img < border: 1px solid #a0522d; padding: 5px; >.wrapper , .wrapper img , .hoverEffect < border-radius: 100%; height: 175px; width: 175px; >.wrapper:hover .hoverEffect
Icon
Отслеживать
ответ дан 8 мая 2018 в 7:13
1,506 5 5 серебряных знаков 18 18 бронзовых знаков
Большое спасибо)
9 мая 2018 в 16:05
- Можно наложить маску и скрыть ее opacity: 0; а при наведении показывать с определенной степенью прозрачности.
- Лучше отрисовав 2 картинки в 1 файле загружать 1 с backgroud-postiion с начальное верхней левой точки и задать размер чтобы 2-ю ее часть не было видно, а при наведении делать смещение картинки с тем же backgroud-postiion в результате пользователь и не поймет что это одна большая картинка просто при наведении ее другая часть показывается.
Отслеживать
ответ дан 8 мая 2018 в 7:04
1,781 1 1 золотой знак 7 7 серебряных знаков 19 19 бронзовых знаков
- html
- css
- css-animation
- img
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Вращение или поворот изображения при наведении
Я хочу узнать, как сделать вращающееся изображение, когда на него наводится курсор.
Хотелось бы понять, как реализовать эту функциональность с помощью CSS и следующего кода:
Свободный перевод вопроса Spin or rotate an image on hover от участника @user3597950.
Отслеживать
Alexandr_TT
задан 15 мар 2017 в 20:43
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
ассоциация: stackoverflow.com/q/23695090/564240
15 мар 2017 в 20:44
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вы можете использовать transitions CSS3 для вращения изображения при наведении.
Rotating image :
img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img:hover
img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img:hover
Дополнительная информация и ссылки:
- Руководство по transitions CSS на MDN
- Руководство по transforms CSS на MDN
- Таблица поддержки браузера для 2d-transforms на caniuse.com
- Таблица поддержки браузера для transitions на caniuse.com
Свободный перевод ответа от участника @web-tiki.
Отслеживать
ответ дан 15 мар 2017 в 20:43
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
-webkit уже можно не писать.
16 мар 2017 в 7:19
@Qwertiy этот ответ уже отметили, как дубликат с твоим постом ru.stackoverflow.com/questions/499107/…, но ведь ничего общего нет, кроме слова «вращение» У тебя два текстовых блока, которые подменяют друг друга при вращении вокруг «Y», а у меня в ответе один образ, который вращается вокруг оси «Z»
Предыдущая запись