帶有內部邊框的圖像，縮放溢出：圖像上方隱藏文字

Question

懸停圖像時，我想要有一個內部邊框（這是我的）並將圖像縮放到其大小內。我必須在哪裏放置溢出：隱藏以便圖像不會變大？

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

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

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