Как растянуть мое изображение горизонтально, но не вертикально при наведении? - PullRequest
Новая
       4

Как растянуть мое изображение горизонтально, но не вертикально при наведении?

0 голосов
/ 04 июля 2019 

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

Как заставить изображение выйти за пределы вертикали?

Свойство height (.film{ min-height: 311px;}) изменять не нужно.

Ответы [ 2 ]

2 голосов
/ 04 июля 2019

Измените overflow: hidden; на overflow: visible; в классе фильма.Смотрите ниже: 

.film {
    text-align: center;
    width: 234px;
    min-height: 311px;
    position: relative;
    z-index: 1;
    overflow: visible;
}
0 голосов
/ 04 июля 2019

добавить 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>
...