CODEWITHSUNDEEP
htmlcsscss-transforms
Ivan
Ivan

Reputation: 3

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

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

Upvotes: 0

Views: 333

Answers (2)

Prasanth
Prasanth

Reputation: 124

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>

Upvotes: 0

connorhansen
connorhansen

Reputation: 191

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;
}

Upvotes: 2

Related Questions