Responsive Image Hover Zoom

Question

我正在尝试构建一个响应式图像悬停。我已经使宽度响应没有问题，但高度造成问题。我曾尝试：

1. 建立最小/最大高度像素级的设置高度为自动（这 使我的形象消失）
2. 使用百分比高度（100％ - 这将导致我的图像消失）
3. 使用媒体查询（只在断点）

我立足这个CSS很大程度上关闭后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"> 
 
    \t \t <div id="PurpleColor"> 
 
    \t <h2>Videography</h2> 
 
    \t </div> 
 
    
 
    \t \t <div class="viewport_css"> 
 
      <a class="imgwrapper" href="#"> 
 
      <img class="dummy" src="links/Home-Videography.jpg" /> 
 
\t \t \t </a></div> 
 
     
 
     <div class="ImageFooter" id="Purple"> 
 
     \t <p class="ImageContainerP"> 
 
      \t The latest technology</p> 
 
    \t \t </div> 
 
    </div>

Answer 1

我落得这样做对于变换功能，我想我已经想通进一步研究的价值会增加或降低元素的大小出。我的图片现在可以使用彩色背景而不是有色叠加，并使用不透明度功能进行翻转，该功能可以起作用。我不得不放弃的唯一特征是文字。添加绝对位置（如：.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> 

Answer 2

你试过采取看看CSS transform财产？

如果不是，请看看here (w3c)或here(dev.moz)或here (google (search for css transform scale))以了解它是如何工作的。

基本上，它根据你已经把

DEMO