Главная » Языки программирования

Hover a picture in html

Содержание
  1. Hover-эффекты для изображений с помощью CSS
  2. 1. Создайте HTML
  3. 2. Добавьте CSS
  4. Пример
  5. Пример
  6. How to Change Image on Hover with CSS
  7. Create an Element with a Class
  8. Change HTML img Tag Background with CSS
  9. Conclusion

Hover-эффекты для изображений с помощью CSS

Самая распространенная функция hover-эффектов — это выделение ссылок или кнопок текста. Но есть и много других функций.

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

Hover — это эффект при наведении курсора мыши на какой-нибудь элемент. Он часто используется для стилевого оформления, а также для удобства и простоты использования.

Здесь вы узнаете, как создать креативные hover-эффекты для изображений, используя только CSS.

1. Создайте HTML

figure img src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" /> 
W3docs

2. Добавьте CSS

  • Установите max-width, min-width и max-height изображения.
  • Установите position в relative.
  • Установите overflow в hidden, чтобы контент был срезан и поместился в блок.
  • Установите цвет для figcaption и выравнивание текста.
figure.image < position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 310px; max-height: 220px; width: 100%; background: #000000; color: #eeeeee; text-align: center; >
  • Добавьте transition для класса image. Мы используем селектор * (asterisk), который выделяет все элементы документа.
figure.image * < -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; >
figure.image img < max-width: 100%; position: relative; opacity: 0.6; >

Нашим следующим шагом будет добавление стиля к h3.

  • Установите background и position для h3.
  • Задайте свойство transform. Оно указывает 2D или 3D трансформацию элемента. Данное свойство позволяет вращать, масштабировать, сдвигать элемент.
  • Задайте text-transform со значением uppercase для установления символов верхнего регистра.
  • Задайте font-weight. Здесь мы установили значение в 400.
figure.image h3 < position: absolute; left: 50px; right: 50px; display: inline-block; background: #000; -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); transform: skew(-5deg) rotate(-10deg) translate(0, -50%); padding: 15px 5px; margin: 0; top: 50%; text-transform: uppercase; font-weight: 400; >

Теперь добавим стиль к псевдоэлементу :before , что является элементом сгенерированного контента. Он добавляет перед контентом элемент любого типа.

  • Установите height и width элемента и задайте цвет.
  • Установите transition в transition-duration (0.3).
  • Укажите свойство transform . Поверните элемент на 110 градусов и переместите его по оси y на -50%.
figure.image:before < height: 130%; width: 130%; top: 0; left: 0; content: ''; background: #cccccc; position: absolute; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotate(110deg) translateY(-50%); -moz-transform: rotate(110deg) translateY(-50%); -ms-transform: rotate(110deg) translateY(-50%); -o-transform: rotate(110deg) translateY(-50%); transform: rotate(110deg) translateY(-50%); >

Следующим шагом установите hover-эффект для изображения, h3 и :before.

figure.image:hover img, figure.image.hover img < opacity: 1; -moz-transform:scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); > figure.image:hover h3, figure.image.hover h3 < -moz-transform:skew(-10deg) rotate(-10deg) translate(-150%, -50%); -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); > figure.image:hover:before, figure.image.hover:before < -moz-transform:rotate(110deg) translateY(-150%); -ms-transform: rotate(110deg) translateY(-150%); -o-transform: rotate(110deg) translateY(-150%); transform: rotate(110deg) translateY(-150%); >

И наконец, соединим все части нашего кода:

Читайте также:  Java типы числовых данных

Пример

html> html> head> title>Заголовок документа title> style> figure.image < position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 310px; max-height: 220px; width: 100%; background: #000000; color: #eeeeee; text-align: center; > figure.image* < -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; > figure.image img < max-width: 100%; position: relative; opacity: 0.6; > figure.image h3 < position: absolute; left: 50px; right: 50px; display: inline-block; background: #000; -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); transform: skew(-5deg) rotate(-10deg) translate(0, -50%); padding: 15px 5px; margin: 0; top: 50%; text-transform: uppercase; font-weight: 400; > figure.image:before < height: 130%; width: 130%; top: 0; left: 0; content: ''; background: #cccccc; position: absolute; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotate(110deg) translateY(-50%); -moz-transform: rotate(110deg) translateY(-50%); -ms-transform: rotate(110deg) translateY(-50%); -o-transform: rotate(110deg) translateY(-50%); transform: rotate(110deg) translateY(-50%); > figure.image:hover img, figure.image.hover img < opacity: 1; -moz-transform:scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); > figure.image:hover h3, figure.image.hover h3 < -moz-transform:skew(-10deg) rotate(-10deg) translate(-150%, -50%); -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); > figure.image:hover:before, figure.image.hover:before < -moz-transform:rotate(110deg) translateY(-150%); -ms-transform: rotate(110deg) translateY(-150%); -o-transform: rotate(110deg) translateY(-150%); transform: rotate(110deg) translateY(-150%); > style> head> body> h2> hover-эффект h2> figure class="image"> img src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="W3docs"/> figcaption> h3>W3docs h3> figcaption> body> html>

Рассмотрим другой пример трехмерной трансформации:

Пример

html> html> head> title>Заголовок документа title> style> .example < width: 250px; height: 250px; margin: 20px auto 40px auto; perspective: 1000px; > .example a < display: block; width: 100%; height: 100%; background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: cover; transform-style: preserve-3d; -webkit-transform: rotateX(80deg); -moz-transform: rotateX(80deg); -ms-transform: rotateX(80deg); -o-transform: rotateX(80deg); transform: rotateX(80deg); -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; > .example:hover a < -webkit-transform: rotateX(10deg); -moz-transform: rotateX(10deg); -ms-transform: rotateX(10deg); -o-transform: rotateX(10deg); transform: rotateX(10deg); > .example a:after < content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; background: #cccccc; -webkit-transform: rotateX(60deg); -moz-transform: rotateX(60deg); -ms-transform: rotateX(60deg); -o-transform: rotateX(60deg); transform: rotateX(60deg); transform-origin: bottom; > style> head> body> h2> hover-эффект h2> div class="example"> a href="#"> a> div> body> html>

Источник

How to Change Image on Hover with CSS

To change the background image on an element in CSS on hover we can use the CSS pseudo :hover class to set a new background property.

Create an Element with a Class

First, let’s create an HTML div element with a class attribute.

Now let’s create the CSS that will give the element a background image and change the background on a hover event.

.picture  width: 600px; height: 600px; background: url('cat.jpg') no-repeat; background-size: contain; > .picture:hover  background: url('cat_hover.jpg') no-repeat; background-size: contain; >

Change HTML img Tag Background with CSS

If you want to use HTML img tags and change the image on hover using CSS we will have to use two img tags and the position: absolute CSS property.

div class="picture"> img src="cat.jpg" alt="cat 1"> img src="cat_hover.jpg" alt="cat 2" class="hover"> div> 
.picture  position: relative; > .picture img  width: 600px; height: 600px; position: absolute; top: 0; left: 0; > .picture .hover  display: none; > .picture:hover .hover  display: block; >

In the above example, we have a div containing the two img tags; the one with the hover class has display: none applied to it. Both images are positioned absolutely at the top left of the container div . On hover the second image is set to display, covering the first image.

Conclusion

You now know how to display an image on hover when the background image is in the HTML source or in the CSS.

Источник

Оцените статью
© 2024 Программирование