CSS图像无法在悬停时缩放 [英] CSS Image not scaling on hover

问题描述

我已经制作了一个响应式图像网格，并正在尝试向其添加悬停效果，以使图像获得深色覆盖并在其中淡入一些文本.但是，我一直很难实施它.

I've made a responsive image grid and am trying to add a hover effect to it so that the image gets a dark overlay and some text fades in on it. However, I've been having a tough time implementing it.

这是我的HTML结构.

Here's my HTML structure.

<div class="tile">
        <img src="some_image" class="animate">
        <div class="overlay">
        <p>Mahatma Gandhi</p>
</div>

这是我的CSS

.gallery .row .tile:hover ~ .tile img {
  transform: scale(1.2);
}

但是，将鼠标悬停在图像上时，它没有预期的行为.

However upon hovering over the image, it does not have the expected behaviour.

怎么了?

编辑我有了悬停效果，现在可以淡入文本了.

EDIT I got the hover effect to work and I can now fade in text.

这是我的代码:

<div class="tile">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tagore_Gandhi.jpg/220px-Tagore_Gandhi.jpg" class="animate">
                        <div class="overlay">
                                <div class="text">Mahatma Gandhi</div>
                            </div>
                      </div>

CSS

.tile {
  position: relative;
  width: 100%;
}

.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: .5s ease;
  background-color: rgba(0, 0, 0, 0.8);
}

.tile:hover .overlay {
  opacity: 1;
}

这似乎可行，但我认为它没有一定的感觉".因此，我需要在图像上添加缩放效果.我该怎么办

This seems to work but I think it doesnt have a certain "feel" to it. So I need to add a scale effect to the image. How can I do that

推荐答案

以下是我认为可以帮助您解决问题的jsFiddle: https://jsfiddle.net/mcs3yn1x/

Here is a jsFiddle that i think will help you to resolve your issue: https://jsfiddle.net/mcs3yn1x/

HTML

<div class="tile">
 <img src="https://picsum.photos/200/300" class="animate">
 <div class="overlay">
 <p>Mahatma Gandhi</p>
</div>

CSS

.tile {
  border: 2px solid black;
}

.tile:hover img {
  transform: scale(1.2);
}

修改

在详细了解了您的问题之后，我创建了以下jsFiddle: https://jsfiddle.net/f1gzonjr/4/

After hearing alittle more about your issue I have created the following jsFiddle: https://jsfiddle.net/f1gzonjr/4/

HTML

<div class="tile">
  <div class="container">
   <img src="https://picsum.photos/200/300" class="animate">
   <div class="overlay">
    <p>Mahatma Gandhi</p>
  </div>
</div>

CSS

.tile {
  position: relative;

  top: 0px;
  left: 0px;

  height: 300px;
  width: 200px;

  overflow: hidden;

  border: 2px solid black;
} 

.container:hover img{
  transform: scale(1.2);
}

.overlay{
 position: absolute;
 display: none;

 top: 0px;
 left: 0px;

 height: 100%;
 width: 100%;

 background-color: rgba(0,0,0,0.5);
}

.overlay p {
 position: relative;
 text-align: center;

 color: #fff;
}

.tile:hover .overlay{
 display: block;
}

这篇关于CSS图像无法在悬停时缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！