带有内边框的图像，缩放溢出：图像上的隐藏和文本答案

【问题标题】：an Image with inside border, zoom overflow:hidden and text over the image带有内边框的图像，缩放溢出：图像上的隐藏和文本
【发布时间】：2016-06-21 22:15:43
【问题描述】：

在悬停图像时，我希望有一个内边框（我有这个）并将图片缩放到其大小。我必须在哪里放置溢出：隐藏以便图像不会变大？

.border {
  display: inline-block;
  position: relative;
  max-width: 495px;
  max-height: 369px;
  overflow: hidden;
}

.border::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 0 5 rgba(255, 255, 255, .5);
  transition: box-shadow .1s ease;
}

.border:hover::after {
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .5);
}

.text {
  font-size: 48px;
  color: #FFF;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  position: absolute;
  margin: auto;
  top: 40%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  text-align: center;
}

.border img {
  max-width: 495px
}

.zoomzoom {
  transition: all 2s;
}

.zoomzoom:hover {
  transform: scale(1.1);
}

<div class="border zoomzoom">
  <a href="http://www.google.com"><h2 class="text">Sunny</h2>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Great_Hall_-_Parliament_of_Australia.jpg/800px-Great_Hall_-_Parliament_of_Australia.jpg"></a></div>

【问题讨论】：

标签： css hover overflow zooming

【解决方案1】：

这段代码应该可以工作。

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.border {
    position: relative;
    border: 1px solid #333;
    margin: 2%;
    overflow: hidden;
    max-width: 495px;
    max-height: 369px;
}
.text {
    font-size: 48px;
    color: #FFF;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    position: absolute;
    margin: auto;
    top: 40%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    text-align: center;
}
.border img {
    max-width: 100%;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    transition: all 2s;
}
.zoomzoom:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

<div class="border zoomzoom">
    <a href="http://www.google.com"><h2 class="text">Sunny</h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Great_Hall_-_Parliament_of_Australia.jpg/800px-Great_Hall_-_Parliament_of_Australia.jpg"></a>
</div>

【讨论】：

【解决方案2】：

我得到了答案

h2{
  font-size:48px;
  color:#FFF;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  margin:0;
}

.border{
  width:350px;
  height:250px;
  display:inline-block;
  position:relative;
  z-index:3;
  overflow:hidden;
  text-decoration:none;
}

.border:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  box-shadow: inset 0 0 0 0 rgba(255,255,255,.5);
  transition: box-shadow .1s ease;
}

.border:hover:after{
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.5);
}

.border img{
  width:100%;
  height:100%;
  opacity:1;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transition:width .25s ease, height .25s ease, opacity .25s ease;
}

.border:hover img{
  width: 400px;
  height: 300px;
  opacity:.7;
}

<div class="border zoomzoom">
  <a href="http://www.google.com"><h2 class="text">Sunny</h2>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Great_Hall_-_Parliament_of_Australia.jpg/800px-Great_Hall_-_Parliament_of_Australia.jpg" class="SpecialZoom" /></a></div>

【讨论】：

我只是注意到 href 不起作用......你有线索吗？