Увеличение изображения при наведении не работает с: после - PullRequest
1 голос
/ 06 января 2020

Я просто хочу добавить эффект увеличения и прозрачное наложение в мое изображение, я пробовал таким образом, но работал только наложение. Эффект увеличения изображения не работает. Как я могу это исправить?

.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>

Ответы [ 3 ]

3 голосов
/ 06 января 2020

Само наложение предотвращает распространение события наведения на изображение.
Одно из решений - не использовать :hover на изображении, а увеличивать изображение при наведении курсора на изображение.

.image-box img{
	position: relative;
	transition: all 500ms ease;
}

.image-box{
	overflow: hidden;
}

.image-box:hover img{       /* changed */
	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>
1 голос
/ 06 января 2020

Просто добавьте следующий класс:

.image-box:hover img{
    transform:scale(1.1);
    transition: all 500ms ease;
}

.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;
}
.image-box:hover img{
    transform:scale(1.1);
    transition: all 500ms ease;
}
<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>
0 голосов
/ 06 января 2020

Я думаю, что ваша демонстрация работает отлично, вам просто нужно внести небольшие изменения в .image-box:after. Я обновил z-index до -1.

.image-box img {
  position: relative;
  transition: all 500ms ease;
}
.image-box {
  overflow: hidden;
}
.image-box:hover img {
  transform: scale(1.1);
}
.image-box:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  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>

Надеюсь, это поможет.

...