Как сделать плавное появление картинки в css
Перейти к содержимому

Как сделать плавное появление картинки в css

  • автор:

Как сделать плавное появление картинки вместо другой?

Сделал так, но картинка меняется только при наведении на другую картинку, а нужно чтобы при наведении на class box1, появлялась картинка с классом img11 вместо img1.

  • Вопрос задан более года назад
  • 294 просмотра

Комментировать
Решения вопроса 1

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer

но картинка меняется только при наведении на другую картинку

Странно, не правда ли?

Вы написали стили, действующие при наведении на другую картинку
img.img11:hover
И, почему-то они срабатывают при наведении на другую картинку O_o
Шок! 😀

Может стоит описать стили в состоянии наведения на их общий блок? Например, в вашем коде это li.button

Ответ написан более года назад
Emil7676 @Emil7676 Автор вопроса

Вот именно, это я и хотел, вот и задаю вопрос, как это сделать? То что картинка меняется при нажатии другой я это знаю. Если вам будет не трудно, подскажите как это сделать? Ну описать стили в состоянии наведения на их общий блок, чтобы при наведении на li.button, появилась картинка img11, а картинка img1 скрылась.

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS

Emil7676, Да вы что.. селекторы — это первое что изучается в css.

К тому же я уже сказал. hover должен быть на родительском блоке

li.button:hover img.img11

Как сделать плавное появление картинки при открытии сайта впервые на css?

сайт

На шапке сайта имеется картинка и я хочу ,чтобы при открытии сайта у пользователя эта картинка плавно появлялась на экране вместо грубой обычной загрузки. Как это можно реализовать без использования js только на html + css? Буду признателен за помощь.

Отслеживать

задан 3 мая 2020 в 3:29

55 1 1 серебряный знак 6 6 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

body < height: 100%; >.header < height: 200px; background: #bfbfbf; >img < width: 100px; position: relative; top: 50%; left: 100px; transform: translateY(-50%); animation-name: Appearance; animation-duration: 3s; animation-timing-function: cubic-bezier(.1,-.6,.2,0); >@-webkit-keyframes Appearance < 0% 100% > @-o-keyframes Appearance < 0% 100% > @-moz-keyframes Appearance < 0% 100% > @keyframes Appearance < 0% 100% >
 

Отслеживать

24k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков

Как сделать плавное появление блока CSS свойствами?

Владимир Ливерко Руководитель отдела разработки

Существует несколько способов. Зная определённые принципы работы с CSS3, можно реализовать плавное появление блока CSS свойствами, тем самым воплотив в жизнь массу креативных идей для сайта. Как вариант – сделать плавное появление элемента, возникающее после наведения указателя мышки на какой-либо элемент на странице. Другой пример – демонстрация элемента спустя заданный временной промежуток без использования скриптов.

Сначала давайте рассмотрим вариант плавного появления блока CSS с помощью свойств при наведении. Нам предстоит сделать следующие шаги.

  1. Создаем два блока: один будет видимым и будет плавно возникать на странице, другой – будет скрытым.
    1 ППБ.docx
  2. Заполним стили оформления.
    2 ППБ
    Для скрытого блока указываем полную прозрачность, а также прописываем для него скорость перехода между состояниями элемента. Для этого нам нужны теги opacity:0 и transition: 2 s. Обратите внимание, скорость перехода состояния элемента мы задали 2 секунды.
  3. Далее – самый важный шаг. Используя селектор .on-hover:hover+ .hidden-block, мы делаем так, чтобы при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. Элемент становится видимым, так как мы изменяем и прозрачность.
    3 ППБ

Важно: блок .hidden-block не располагается внутри .on-hover. Поэтому придётся использовать hover с +. Скрытый элемент в вашем случаи располагается внутри элемента, на который нужно навести курсор? Советуем обратиться к селектору .on-hover:hover+ .hidden-block.

Любуемся результатом.

Теперь перейдём к плавному появление блока с помощью CSS с временной задержкой через использование правила @keyframes.

Хотите показывать элемент с некоторой задержкой? Тогда действуйте по этой схеме:

  1. Создайте прозрачный по умолчанию блок.
    4 ППБ
  2. Пропишите свойства оформления элемента, прозрачность и скорость перехода.
    5 ППБ
    Задайте свойство animation, в котором пропишите название анимации (show), её скорость (2 секунды) и число повторений (1). Указывая свойство animation-fill-mode со значением forwards, вы не допустите того, чтобы после выполнения анимации элемент принял первоначальное состояние. Он сохранит новый вид.
    Также зададим дополнительное свойство, которое отсрочит запуск анимации на 2 секунды (animation-delay).
  3. Через правило @keyframes, задаём последовательность, с которой будет появляться блок.

Чтобы посмотреть результат данных действий, обновите страницу.
Плавное появление блока CSS

Думаем, после изучения нашей пошаговой инструкции, у вас не будет трудностей с настройкой анимации плавного появления блока CSS. Но если вдруг возникли дополнительные вопросы или комментарии, вы можете написать нам с помощью формы обратной связи. Оставляйте свои сообщения – будем рады ответить на них! Или заказывайте разработку сайта под ключ у нас!

Еще ответы по теме:

  • Входит ли наполнение сайта в стоимость разработки?
  • Осуществляет ли Студия ЯЛ техническую поддержку сайтов, сделанных другими подрядчиками?
  • Есть ли у Студии ЯЛ бесплатная поддержка для сайтов, которые она разрабатывает?

Эффекты при наведении на картинку CSS

Эффекты при наведении на картинку CSS

Подборка Hover эффектов при наведении на картинку CSS. Здесь вы найдете эффекты для галереи, эффекты с появлением текста или иконок, рамки и многие другие интересные эффекты для сайта.

Красивое вращение картинки при наведении CSS

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

Пример

HTML

  

CSS

 .beauty-rotate < width: 300px; height: 300px; border: 4px double #bd6c46; /* Рамка */ overflow: hidden; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; >.beauty-rotate:hover

Разворот картинки при наведении CSS

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

Пример

HTML

  

CSS

 /* Блок картинки */ .rotate-block < width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; >/* Изображение */ .change-img < width: 300px; height: 300px; position: relative; perspective: 1000px; border: 1px solid #d68360; /* Рамка */ >.change-img:hover .front-side-img < transform: rotateY(180deg); >.change-img:hover .back-side-img < transform: rotateY(360deg); >/* Стороны изображения */ .front-side-img, .back-side-img < position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: 1s; back-side-imgface-visibility: hidden; >.front-side-img img < max-width: 100%; min-width: 100%; height: auto; >.back-side-img img < max-width: 100%; min-width: 100%; height: auto; transform: scaleX(-1);/* Отражаем изображение по горизонтали */ >.back-side-img

Поворот картинки при наведении CSS

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

Пример

HTML

  

CSS

 img.small-rotate < -webkit-transition: all 1s ease; transition: all 1s ease; >img.small-rotate:hover < -webkit-transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ >

Вращение картинки при наведении CSS

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

Пример

HTML

  

CSS

 img.rotate-img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img.rotate-img:hover < -webkit-transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ >

Рамка внутри блока или картинки при наведении

Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Пример

HTML

  

CSS

 img:hover < outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */ outline-offset: -10px; /* Выводим рамку внутри элемента */ >

Рамка к изображению при наведении

Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.

Пример

HTML

  

CSS

 img:hover < border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */ >

Эффект при наведении на картинку с текстом CSS

Эффекты при наведении на картинку с появлением и подчеркиванием заголовка. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.

Пример

HTML

   

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

CSS 1

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-three < background: #527c82; >figure.effect-text-three img < width: -webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transform: scale(1.1); -webkit-backface-visibility: hidden; backface-visibility: hidden; >figure.effect-text-three:hover img < opacity: 0.4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-three figcaption < text-align: left; >figure.effect-text-three h3 < position: relative; overflow: hidden; padding: 0.5em 0; >figure.effect-text-three h3::after < position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); >figure.effect-text-three:hover h3::after < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-three p < padding: 1em 0; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); >figure.effect-text-three:hover p

CSS 2

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-four figcaption < text-align: right; >figure.effect-text-four h3, figure.effect-text-four p < position: absolute; right: 30px; left: 30px; padding: 10px 0; >figure.effect-text-four p < bottom: 30px; line-height: 1.5; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); >figure.effect-text-four h3 < top: 30px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); >figure.effect-text-four:hover h3 < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-four h3::after < position: absolute; top: 100%; left: 0; width: 100%; height: 4px; background: #fff; content: ''; -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); >figure.effect-text-four h3::after, figure.effect-text-four p < opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; >figure.effect-text-four:hover h3::after, figure.effect-text-four:hover p

Эффекты при наведении на картинку с текстом CSS

Два эффекта при наведении на картинку с появлением текста. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.

Пример

HTML

   

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

CSS 1

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-two figcaption::before < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); >figure.effect-text-two h3 < position: absolute; top: 50%; left: 0; width: 100%; color: #f66d52 !important; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); >figure.effect-text-two figcaption::before, figure.effect-text-two p < -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; >figure.effect-text-two p < position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 0; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); >figure.effect-text-two:hover h3 < color: #fff; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); >figure.effect-text-two:hover figcaption::before , figure.effect-text-two:hover p

CSS 2

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-one img < width: -webkit-calc(100% + 50px); width: calc(100% + 100px); opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transform: scale(1.2); >figure.effect-text-one figcaption < top: auto; bottom: 0; height: 50%; text-align: left; >figure.effect-text-one h3, figure.effect-text-one p < -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); >figure.effect-text-one h3 < color: #f66d52 !important; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; >figure.effect-text-one p < background: rgba(0,0,0,0.6); color: #fff; padding: 10px; opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, transform 0.35s; >figure.effect-text-one:hover img, figure.effect-text-one:hover p < opacity: 1; >figure.effect-text-one:hover img, figure.effect-text-one:hover h3, figure.effect-text-one:hover p < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-one:hover p

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *