マウスオーバーで背景だけを拡大する方法

マウスオーバーで背景の写真だけ拡大させたいです。
色々試してみたのですが、上手くいきません。
助言などいただければ幸いです。
よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="main.css">
6  </head>
7  <body>
8    <div class="l-page-2-small">
9      <div class="l-page-2img l-image1">
10        <div class="l-background-image">
11            <h4 class="l-page2-h4">借りたい</h4>
12            <img class="l-page-imag" src="cofe.jpg">              
13            <p class="l-page-p">住居/お部屋探し<br>
14            賃貸</p>
15        </div>
16    </div>
17  </body>
18</html>

css
1@charset "utf-8";
2
3.l-page-2-small{
4  width: 54vw;
5  height: 29vw;
6  margin: 0 auto;
7}
8/**************************************************/
9.l-page-2img{
10  width: 17vw;
11  height: 22.5vw;
12  margin-top: 6.55vw;
13  position: relative;
14}
15
16
17
18
19.l-image1{
20  background-image: url(background.jpg);
21  background-size: cover;
22}
23
24
25
26/*---------------------------------------------------------*/
27.l-background-image{
28  margin: 0;
29  padding: 0;
30  width: 17vw;
31  height: 22.5vw;
32  position: relative;
33  background-color: rgba(0, 0, 0, 0.2);
34  text-align: center;
35}
36
37.l-background-image .l-page2-h4{
38  margin:0;
39  padding: 6vw 0 0 0;
40  font-family: "NotoSansCJKjp";
41  font-weight: normal;
42  font-size: 24px;
43  letter-spacing: 0.02em;
44  color: #ffffff;
45}
46
47.l-page-imag{
48  margin: 6.2vw 0 0 0;
49  padding: 0;
50  display: inline-block;
51  width: 1.7vw;
52  height: 2.1vw;
53}
54
55
56.l-background-image .l-page-p{
57  padding: 0;
58  margin: 0.5vw 0 0 0;
59  font-family: "NotoSansCJKjp";
60  font-weight: normal;
61  font-size: 15px;
62  color: #ffffff;
63  
64}
65
66.l-background-image .l-page2-h4-top{
67  margin:0;
68  padding: 4.5vw 0 0 0;
69  font-family: "NotoSansCJKjp";
70  font-weight: normal;
71  font-size: 24px;
72  letter-spacing: 0.02em;
73  color: #ffffff;
74}
75
76.l-background-image .l-page-imag-top{
77  margin: 5vw 0 0 0;
78  padding: 0;
79  display: inline-block;
80  width: 1.7vw;
81  height: 2.1vw;
82
83}
84
85.l-background-image .l-page-p-top{
86  padding: 0;
87  margin: 0.5vw 0 0 0;
88  font-family: "NotoSansCJKjp";
89  font-weight: normal;
90  font-size: 15px;
91  color: #ffffff;
92  
93}

行動規範の内容に同意します

回答1件

ベストアンサー

色々試してみたのですが

試したことを記載してもらえると助かります。

IEやedgeでは試せてませんが
以下の方法はどうでしょうか
ご確認ください。

css
1
2.l-image1 {
3  overflow: hidden;
4  position: relative;
5}
6.l-image1:hover::after {
7  transform: scale(1.2);
8}
9
10.l-image1::after {
11  transition: all 0.4s;
12  content: "";
13  display: block;
14  position: absolute;
15  z-index: -1;
16  top: 0;
17  left: 0;
18
19  display: block;
20  width: 100%;
21  height: 100%;
22  background: var(--bg-url) center center no-repeat;
23  background-size: cover;
24}