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

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>