<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
<!-- Code by Angela Delise
https://codepen.io/angeladelise/pen/rNWZvWo?editors=0100 -->
</head>
<body>
<div class="gallery">
<div class="card">
<img src="https://images.unsplash.com/photo-1548689551-5be7ab3f02c4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" class="card__img">
<div class="card__details">
<h2>Summerland</h2>
</div>
</div>
<div class="card">
<img class="card__img" src='https://images.unsplash.com/photo-1596465650761-1bf264453052?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="card__details">
<h2>Ocean Breeze</h2>
</div>
</div>
<div class="card">
<img class="card__img" src='https://images.unsplash.com/photo-1568742344695-bd4cae66128c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="card__details">
<h2>Shoreline</h2>
</div>
</div>
<div class="card"><img class="card__img" src='https://images.unsplash.com/photo-1578236925422-d4266db58d53?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="card__details">
<h2>Mountain View</h2>
</div>
</div>
<div class="card">
<img class="card__img" src='https://images.unsplash.com/photo-1583152607718-1ef10f410528?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="card__details">
<h2>Ocean Blues</h2>
</div>
</div>
<div class="card">
<img class="card__img" src='https://images.unsplash.com/photo-1554393478-7e87effa46ed?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="card__details">
<h2>Village Center</h2>
</div>
</div>
<div class="card">
<img class="card__img" src='https://images.unsplash.com/photo-1588224133371-fb0d2a94a6d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="card__details">
<h2>Beach Vibes</h2>
</div>
</div>
<div class="card">
<img class="card__img" src='https://images.unsplash.com/photo-1601344461488-cd5d00acf751?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="card__details">
<h2>Valley Dreams</h2>
</div>
</div>
<div class="card">
<img class="card__img" src='https://images.unsplash.com/photo-1590057984752-4a1da8cb2fad?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="card__details">
<h2>Highland</h2>
</div>
</div>
</div>
</body>
<!--
-->
/* color variables */
$clr-primary: #0e48fe;
$clr-primary-hover: #29e6a7;
$clr-primary-dark: #039d69;
$clr-gray100: #f9fbff;
$clr-gray150: #f4f6fb;
$clr-gray200: #eef1f6;
$clr-gray300: #e1e5ee;
$clr-gray400: #767b91;
$clr-gray500: #4f546c;
$clr-gray600: #2a324b;
$clr-gray700: #161d34;
$clr-gray800: #0c101d;
/* border radius */
$radius: 0.2rem;
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans", sans-serif;
height: 100vh;
background-color: $clr-gray100;
margin: 2rem;
}
.gallery {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(12rem, 0.3fr));
grid-auto-rows: 12rem;
gap: 0.5rem;
}
.card {
overflow: hidden;
border-radius: $radius;
cursor: pointer;
position: relative;
&__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 250ms ease-out;
}
&__details {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(2px) brightness(1.3);
padding: 0.5rem;
opacity: 0;
transition: opacity 350ms;
h2 {
text-align: center;
line-height: 1.5rem;
color: $clr-gray100;
text-shadow: 0 0 20px $clr-gray700, 0 0 5px $clr-gray500;
position: relative;
top: 1rem;
transition: top 350ms;
}
}
//Card Hover Effects
&:hover img {
transform: scale(1.1);
}
&:hover &__details {
opacity: 1;
}
&:hover &__details h2 {
top: 0;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.