响应图像悬停缩放

Question

我正在尝试构建响应式图像悬停。我已经使宽度响应没有问题，但高度引起了问题。我试过：

设置一个 min/max 高度像素设置高度为自动（这导致我的图像消失）
使用百分比作为高度（100% - 这会导致我的图像消失）
使用媒体查询（仅在断点处更改）

我的 CSS 主要基于 post Responsive Image Hover - CSS/JQuery，但我无法理解为高度提供的解决方案，或者我执行的不正确。

.viewport_css {
  position: relative;
  max-width: 599px;
  height: auto;
  overflow: hidden;
}
.viewport_css .dummy {
  width: 100%;
  height: auto;
  display: block;
}
.viewport_css a,
.viewport_css a:hover:before,
.viewport_css a:hover:after {
  position: absolute;
  left: 0;
  right: 0;
}
.viewport_css a,
.viewport_css a:hover:after {
  top: 0;
  bottom: 0;
}
.viewport_css a:hover:after {
  content: '';
  display: block;
  z-index: 100;
  background-color: rgba(255, 255, 255, .25);
}
.viewport_css a:hover:before {
  content: 'View';
  color: #fff;
  top: 50%;
  text-align: center;
  z-index: 200;
  margin-top: -0.5em;
}
.viewport_css .imgwrapper {
  width: 200%;
  height: 200%;
  margin-left: -50%;
  margin-top: -50%;
  transition: all 0.5s ease-in;
}
.viewport_css .imgwrapper img {
  width: 100%;
  height: auto;
  display: block;
}
.viewport_css .imgwrapper:hover {
  width: 100%;
  height: 100%;
  margin-left: 0;
  margin-top: 0;
}

  <div class="ImageContainer">
       <div id="PurpleColor">
       <h2>Videography</h2> 
     </div>
    
      <div class="viewport_css">
            <a class="imgwrapper" href="#">
            <img class="dummy" src="links/Home-Videography.jpg" />
   </a></div>
        
        <div class="ImageFooter" id="Purple">
          <p class="ImageContainerP">
           The latest technology</p>
    </div>
   </div>

Answer 1

您是否尝试过查看 CSS transform 属性？

如果没有，请查看here (w3c) or here(dev.moz) or just here (google (search for css transform scale))以了解其工作原理。

基本上它会根据您输入的值增加或减少元素的大小

DEMO

Answer 2

我最终对变换功能做了进一步的研究，我想我已经弄明白了。我的图像现在可以响应彩色背景而不是有色覆盖，使用翻转的不透明度功能，这是有效的。我不得不放弃的唯一功能是文本。添加绝对位置（例如：.photo a{position:absolute}）会折叠整个div。如果有人有解决该问题的方法，我很想听听。文字是一个很好的补充，但幸运的是我不需要这个项目。

.photo {
max-width: 599px;
width:100%;
background-color:#A54499;
height: auto;
position: relative;
overflow: hidden;
}
.grow img {
width: 100%;
height: auto;
background-color:#A54499;
transition: all 0.5s ease-in-out;
}
.grow img:hover {
display: block;
z-index: 100;
-webkit-transform: scale(1.17);
transform: scale(1.17);
opacity: 0.7;
}

源代码

<div class="ImageContainer">
    <div id="PurpleColor">
          <h2>Videography</h2> 
    </div>

    <div class="photo">
        <a class="grow" href="#">
            <img src="links/Home-Videography.jpg" />
        </a></div>

        <div class="ImageFooter" id="Purple">
            <p class="ImageContainerP">
            The latest technology with outstanding techniques</p>
        </div>

   </div>
</div>

响应图像悬停缩放

Responsive Image Hover Zoom

html

css

response