An image with inner border, zoom out: hidden and text on the image

advertisements

On hovering an image I want to have an inside border (this i have) and zoom the picture inside its size. where do I have to put the overflow:hidden so that the image doesn't get larger ?

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

This code should work.

* {
    -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>