Материал

02.09.17

Эффект увеличения фонового изображения при наведении курсора мыши на HTML и CSS

Эффект увеличения изображения при наведении курсора мыши известен многим. Но как сделать так, чтобы увеличивалось только фоновое изображение (background-image) без увеличения основного содержимого блочного элемента?

Содадим блочный элемент с шириной 340 точек, а высотой 230 точек.

<div class="vozm"></div>

Для него укажем стиль:

.vozm {
width:340px;
height:230px;
float:left;
overflow: hidden;
}

Выравниваем по левому краю - float:left. Также указываем свойство overflow со значением hidden для того, чтобы фоновое изображение не выходило за область нашего блока.

На следующем этапе помещаем содержимое в наш блочный элемент:

<div class="vposf">
<p>Текст 1</p>
<div class="red_bl"></div></div>

Стиль:

.vozm p {
color:#da291c;
font-weight:bold;
font-size:16px;
line-height:21px;
}
.vozm .red_bl {
width:30px;
height:6px;
background-color:#da291c;
}

Указываем цвет текста для абзацев в блочном элементе - color со значением #da291c. Также указываем на то, что текст будет полужирный с размером (font-size) 16 пикселей и междустрочным интервалом (line-height) в 21 пиксель. 

Стиль "red_bl" добавит красивый горизонтальный элемент красного цвета в наш блочный контейнер. Ширина 30 точек, высота 6 точек, цвет такой же как и у текста.

Также добавляем стиль для внутреннего блока:

.vposf {
position:relative;
z-index:9999;
left:45px;
top:40px;
}

Указываем относительное положение внутреннего блока с внутренними отступами слева 45 точек и сверху 40 точек.

Добавляем фоновое изображение background-image:

<div class="child bg-1"></div>

Стиль для него выглядит следующим образом:

.child {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}

Свойство transition для разных браузеров используется для того, чтобы эффект увеличения изображения фона при наведении происходил плавно в течении 50 миллисекунд. Ширину и высоту указываем равной 100%. Также позицию фона (background-position) ставим в центре и шасштабируем изображение (background-size) по ширине и высоте блока.

Дальше добавим эффект увеличения фонового изображения при наведении курсора мыши или фокусировке:

.vozm:hover .child,
.vozm:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

Для этого используется свойством transform cсо значением scale. Увеличение производим на 20% от исходного.

Ну и подгружаем сам фон:

.bg-1 {background-image: url('/userf_fs/stati/fon_sh.jpg');margin-top: -59px;}

Так как блочный элемент с фоновым изображением находится ниже нашего текста, то его необходимо поднять. Для этого используем отрицательное значение для свойства margin-top.

Итак, html код выглядит следующим образом:

<div class="vozm">
<div class="vposf">
<p>Текст 1</p>
<div class="red_bl"></div></div>
<div class="child bg-1">
</div>
</div>

А css следующим образом:

.vozm {
width:340px;
height:230px;
float:left;
overflow: hidden;
}
.child {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.vozm:hover .child,
.vozm:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.vozm p {
color:#da291c;
font-weight:bold;
font-size:16px;
line-height:21px;
}
.vozm .red_bl {
width:30px;
height:6px;
background-color:#da291c;
}
.bg-1 {background-image: url('http://webriz.ru/userf_fs/stati/fon_sh.jpg');margin-top: -59px;}
.vposf {
position:relative;
z-index:9999;
left:45px;
top:40px;
}

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

Итак, мы достигли желаемого результата. Ниже представлен работающий пример для 6 изображений.