Эффект перекатывания

How to Overlay Images with CSS

Overlays can be a great addition to the image and create an attractive website. In this snippet, we’ll show different ways of using overlays in CSS.

A common method is to use a colored overlay over a linked image. First, we’re going to demonstrate an example where we slightly darken the image. Let’s start with creating HTML.

Create HTML

h1>Example h1> h2>Original image h2> div class="image"> div> h2>Overlay image h2> div class="image"> div class="overlay"> div> div>

Add CSS

• Set the width, height, and background-color for the “overlay” class.
• Specify the background-image and other background properties for the «image» class.

h1 < text-align: center; > .overlay < width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); > .image < width: 500px; height: 330px; margin-bottom: 20px; background-image: url('https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-position: center; background-size: cover; background-repeat: no-repeat; >

Now, you can see the full example.

Example of overlaying an image:

html> html> head> title>Title of the document title> style> h1 < text-align: center; > .overlay < width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); > .image < width: 500px; height: 330px; margin-bottom: 20px; background-image: url('https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-position: center; background-size: cover; background-repeat: no-repeat; > style> head> body> h1>Example h1> h2>Original image h2> div class="image"> div> h2>Overlay image h2> div class="image"> div class="overlay"> div> div> body> html>

Result

We can also add hover effects to the linked images. Color overlays are the most common effect that can be added to the website and create hover effects. Let’s see some examples and learn how to create an overlay effect on the image on hover.

Example of overlaying an image on hover:

html> html> head> style> .container < position: relative; width: 50%; > .image < display: block; width: 100%; height: auto; > .overlay < position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .7s ease; background-color: #339c57; > .container:hover .overlay < opacity: 1; > .text < color: white; font-size: 18px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; > style> head> body> div class="container"> img src="https://images.unsplash.com/photo-1583528306385-8f29f27cb2d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="travel" class="image"> div class="overlay"> div class="text">Travel div> div> div> body> html>

Example of overlaying an image on hover with a fading effect:

html> html> head> title>Title of the document title> style> .container < position: relative; width: 50%; > .image < opacity: 1; display: block; width: 100%; height: auto; transition: .7s ease; backface-visibility: hidden; > .middle < transition: .7s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; > .container:hover .image < opacity: 0.4; > .container:hover .middle < opacity: 1; > .text < background-color: #009c36; color: white; font-size: 18px; padding: 14px 28px; > style> head> body> div class="container"> img src="https://images.unsplash.com/photo-1583528306385-8f29f27cb2d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="travel" class="image"> div class="middle"> div class="text">Travel div> div> div> body> html>

Example of overlaying an image title:

html> html> head> title>Title of the document title> style> * < box-sizing: border-box; > .container < position: relative; width: 50%; max-width: 300px; > .image < display: block; width: 100%; height: auto; > .overlay < position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; transition: .7s ease; opacity: 0; color: white; font-size: 20px; padding: 20px; text-align: center; > .container:hover .overlay < opacity: 1; > style> head> body> div class="container"> img src="https://images.unsplash.com/photo-1583528306385-8f29f27cb2d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="travel" class="image"> div class="overlay">Travelling div> div> body> html>

In our last example, we create the effect of an image overlay using two images, one of them overlaying the other. Our second image will appear at the bottom right corner of the first image when hovering.

Example of overlaying an image with another image:

html> html> head> title>Title of the document title> style> .gallerypic < width: 500px; text-decoration: none; position: relative; display: block; border: 1px solid #666; padding: 3px; margin-right: 5px; float: left; > .gallerypic span.zoom-icon < visibility: hidden; position: absolute; right: 0; bottom: 0; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.6; > a.gallerypic:hover span.zoom-icon < visibility: visible; > style> head> body> a href="#" class="gallerypic"> img src="https://images.unsplash.com/photo-1492136344046-866c85e0bf04?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Gallery Photo" class="pic" /> span class="zoom-icon"> img src="https://images.unsplash.com/photo-1505205296326-2178af1b47bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="200" height="150" alt="Zoom"> span> a> body> html>

Источник

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Заменить одну картинку на другую при наведении на неё курсора мыши.

Решение

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.

Псевдокласс :hover

Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.

1. Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
2. Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
3. Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
4. Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.

На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).

а б

Рис. 1. Картинки для создания эффекта перекатывания

Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .

Пример 1. Использование псевдокласса :hover

HTML5 CSS 2.1 IE Cr Op Sa Fx

Приведённый способ хотя и прост в реализации, но имеет определённый недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.

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

Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.

Рис. 2. Изображение с двумя картинками

Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position , как показано в примере 2.

Пример 2. Изменение положения рисунка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Для селектора A устанавливается фоновое изображение через свойство background , ширина ( width ) совпадает с рисунком, а высота (свойство height ) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.

При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.

Источник

HTML Image Hover Effects Using Onmouseover

This article shows a quick and easy way to add a hover effect to a graphic used for a link (anchor). The HTML anchor element, , is used to jump, i.e. link, to another web page or location. The hover HTML method used in this article is also called the mouse over effect, because it uses the images’s onmouseover event to manipulate the link’s graphic. For this hover effect example no cascading style sheets (CSS) are used.

What is a web page link in HTML?

As an example, to link to the home page of this website the HTML code would be:

It shows in the browser as a link like this:

How do I use an image for a link?

Instead of a simple text link the HTML img element can be used to replace the text. Set the HTML image src attribute to the image address (URL) or the path on the web server to the image:

In this case the link now shows as a home graphic:

How do I generated a HTML hover image effect?

The mouse over image effect uses a tiny bit of JavaScript on two mouse events, onmouseover and onmouseout. The image hover effects are activated as the events fire when the mouse moves over the graphic and then away from the graphic. Firstly two graphics are required for the effect, usually the same image in different colors. Here are the images used for this example:

The HTML hover image effect code sets the image src (for source) attribute to the correct graphic using the onmouseover and onmouseout events. This is the code:

With this code when the mouse hovers over the home image it turns green:

If the images used are button graphics then you can get button hover effects in a similar way:

Author: Daniel S. Fowler Published: 2016-12-28 Updated: 2017-01-01

Do you have a question or comment about this article?

(Alternatively, use the email address at the bottom of the web page.)

↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.

Free Android Projects and Samples:

Источник