<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
width: 1000px;
}
.flex {
display: flex;
}
.column1 {
width: 500px;
height: 500px;
overflow: hidden;
}
.column1 img {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="flex">
<div class="column1">
<img src="images/slider/1.jpg" alt="">
</div>
<div class="column2">
<h1>Заголовок</h1>
<p>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Строчка ipsum, подпоясал пустился? Текста океана пояс точках, это моей, ее себя вдали пунктуация маленькая своих ты оксмокс свой толку, злых использовало заголовок. На берегу наш курсивных, мир последний, грустный страна своих меня имеет единственное, своих продолжил вопроса сбить прямо lorem ручеек текст щеке предупреждал выйти все родного путь если рот. Языком сих большого необходимыми семь заглавных составитель всемогущая, наш первую.
</p>
</div>
</div>
</body>
</html>
На выходе получаю:
Если убрать
overflow: hidden;
получаю :
этот же результат я хочу получить и с overflow
overflow использую, чтобы обернуть картинку. При наведении курсора, картинка увеличивается, и чтобы картинка не вылазила, обрезаю overflow. flex'ом выравниваю блоки.
Как-то можно решить эту задачу?
Простой