Создаем разметку HTML:
Пишем наш стиль CSS:
Смотрим результат:
HTML:
<div class="container">
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?sport" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<img src="https://source.unsplash.com/370x270/?wild" alt="">
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?dance" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?outdoor" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?horse" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?wedding" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?water" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<img src="https://source.unsplash.com/370x270/?dog" alt="">
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?love" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?sky" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?earth" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?ocean" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?mountain" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<img src="https://source.unsplash.com/370x270/?car" alt="">
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?lion" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?safari" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?flag" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
<div class="box">
<div class="image">
<img src="https://source.unsplash.com/370x270/?map" alt="">
</div>
<!-- image -->
<div class="content">
<h2>Image Hover Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ipsum.</p>
</div>
<!-- content -->
</div>
<!-- box -->
</div>
<!-- container -->
CSS:
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
body {
background: #0f2027; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2c5364, #203a43, #0f2027);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#2c5364,
#203a43,
#0f2027
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
text-align: center;
}
.container {
width: 80%;
margin: 40px auto;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
font-family: "Indie Flower", cursive;
}
.box img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.box {
position: relative;
}
.box::after,
.box::before {
content: "";
position: absolute;
opacity: 1;
transition: all 0.4s ease-out;
top: 1rem;
bottom: 1rem;
left: 1rem;
right: 1rem;
}
.box::before {
border-top: 2px solid white;
border-bottom: 2px solid white;
transform: scale(0, 1);
}
.box::after {
border-left: 2px solid white;
border-right: 2px solid white;
transform: scale(1, 0);
}
.box:hover::before {
background: rgba(0, 0, 0, 1);
transform: scale(1.05, 1);
}
.box:hover::after {
transform: scale(1, 1.05);
}
.box .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 15px;
color: white;
opacity: 0;
}
.box:hover .content {
opacity: 1;
}
.box .content h2,
.box .content p {
padding: 10px;
font-size: 1.3rem;
}
.box:hover img {
opacity: 0.4;
}