<div class="wrapper">
<div class="block">
<div class="block__img-wrap">
<img src="https://lh3.googleusercontent.com/proxy/kHUANOn8AJFsQSyq_WNhsKPTUsqK3AMJHGFXz1a8hJG0B8MT2upNY0-tV2fNC_ZbCABbGq1gc7m9bC-plCaamrWpktLFsVSLjQ" alt="" class="block__image">
</div>
<div class="block__text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur corporis debitis odit libero voluptatibus necessitatibus incidunt non quis, facere adipisci quibusdam omnis voluptas quia voluptatem aliquid maxime cupiditate? Illum, repudiandae</p>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
.wrapper {
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: 30px 15px;
}
.block {
max-width: 300px;
width: 100%;
height: 500px;
border: 1px solid #000;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0;
transition: opacity .3s;
z-index: 1;
}
&__img-wrap {
width: 100%;
height: 50%;
overflow: hidden;
}
&__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s;
}
&__text{
display: flex;
justify-content: center;
align-items: center;
height: 50%;
padding: 15px;
text-align: center;
}
&:hover {
&:before {
display: block;
opacity: .5;
}
.block__image {
transform: scale(1.2);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.