How to stretch my image horizontally but not vertically on hover? - html

Question

.film{
text-align: center;
width: 234px;
min-height: 311px;
position: relative;
z-index: 1;
overflow: hidden;
}
.poster{
width: 234px;
height: 311px;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
display: block;
}
.poster:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.film_name{
font-size: 24px;
word-wrap: break-word;
font-family: 'Roboto', 'Arial', 'Tahoma', sans-serif;
font-weight: 700;
}
.year{
color: #00dfff;
}
<div class="film">
<a href="#" target="_blank">
<img class="poster" src="https://st.kp.yandex.net/images/poster/sm_3362295.jpg" alt="Годзилла 2: Король монстров">
<div class="triangle">
<span class="triangle__line"></span>
<span class="triangle__line"></span>
<span class="triangle__line"></span>
</div>
<div class="film_name">Годзилла 2: Король монстров</div>
<div class="year">2019</div>
</div>
</a>
</div>
How to make the picture go beyond the vertical?
The height (.film{ min-height: 311px;}) property does not need to be changed.

Answer 1

Change overflow: hidden; to overflow: visible; in the film class. See below:
.film {
text-align: center;
width: 234px;
min-height: 311px;
position: relative;
z-index: 1;
overflow: visible;
}

Answer 2

add div (poster-panel) to image tag and set overflow:hidden... so the image will stretch inside the poster-panel div.
.film{
text-align: center;
width: 234px;
min-height: 311px;
position: relative;
z-index: 1;
overflow: hidden;
}
.poster-panel{
overflow: hidden;
}
.poster{
width: 234px;
height: 311px;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
display: block;
}
.poster:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.film_name{
font-size: 24px;
word-wrap: break-word;
font-family: 'Roboto', 'Arial', 'Tahoma', sans-serif;
font-weight: 700;
}
.year{
color: #00dfff;
}
<div class="film">
<a href="#" target="_blank">
<div class="poster-panel">
<img class="poster" src="https://st.kp.yandex.net/images/poster/sm_3362295.jpg" alt="Годзилла 2: Король монстров">
</div>
<div class="triangle">
<span class="triangle__line"></span>
<span class="triangle__line"></span>
<span class="triangle__line"></span>
</div>
<div class="film_name">Годзилла 2: Король монстров</div>
<div class="year">2019</div>
</div>
</a>
</div>