Я просто хочу добавить эффект увеличения и прозрачное наложение в мое изображение, я пробовал таким образом, но работал только наложение. Эффект увеличения изображения не работает. Как я могу это исправить?
.image-box img {
position: relative;
transition: all 500ms ease;
}
.image-box {
overflow: hidden;
}
.image-box img:hover {
transform:scale(1.1);
}
.image-box:after {
content: '\A';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: all 500ms ease;
}
.image-box:hover:after {
opacity: 1;
}
<div class="inner-box">
<figure class="image-box">
<img width="480" height="480" src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
</figure>
</div>