<div class="gs-cards-container">
<div class="gs-cards-grid">
<a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BMmIwZDMyYWUtNTU0ZS00ODJhLTg2ZmEtMTk5ZmYzODcxODYxXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg)">
<div class="gs-card-data">
<div class="gs-card-over-header">
Movie
</div>
<div class="gs-card-header">
Top Gun: Maverick
</div>
<div class="gs-card-content">
After more than thirty years of service as one of the Navy's top aviators, Pete Mitchell is where he belongs, pushing the envelope as a courageous test pilot and dodging the advancement in rank that would ground him.
</div>
</div>
</a>
<a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BZjBlMjIxN2ItNTMyNi00NDk5LWFhMzEtNzdiODE0Y2M4MWI2XkEyXkFqcGdeQXVyMTM1MTE1NDMx._V1_.jpg)">
<div class="gs-card-data">
<div class="gs-card-over-header">
Movie
</div>
<div class="gs-card-header">
Chip 'n Dale: Rescue Rangers
</div>
<div class="gs-card-content">
Thirty years after their popular television show ended, chipmunks Chip and Dale live very different lives. When a cast member from the original series mysteriously disappears, the pair must reunite to save their friend.
</div>
</div>
</a>
<a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BODZlYjQ4NzYtZTg1MC00NGY4LTg4NjQtNGE3ZjRkMjk3YjMyXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_FMjpg_UX1000_.jpg)">
<div class="gs-card-data">
<div class="gs-card-over-header">
Tv Show
</div>
<div class="gs-card-header">
Stranger Things
</div>
<div class="gs-card-content">
When a young boy disappears, his mother, a police chief and his friends must confront terrifying supernatural forces in order to get him back.
</div>
</div>
</a>
<a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BYmMxZWRiMTgtZjM0Ny00NDQxLWIxYWQtZDdlNDNkOTEzYTdlXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg)">
<div class="gs-card-data">
<div class="gs-card-over-header">
Movie
</div>
<div class="gs-card-header">
Thor: Love and Thunder
</div>
<div class="gs-card-content">
Thor enlists the help of Valkyrie, Korg and ex-girlfriend Jane Foster to fight Gorr the God Butcher, who intends to make the gods extinct.
</div>
</div>
</a>
<a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BYTRiNDQwYzAtMzVlZS00NTI5LWJjYjUtMzkwNTUzMWMxZTllXkEyXkFqcGdeQXVyNDIzMzcwNjc@._V1_.jpg)">
<div class="gs-card-data">
<div class="gs-card-over-header">
Tv Show
</div>
<div class="gs-card-header">
Game of Thrones
</div>
<div class="gs-card-content">
Nine noble families fight for control over the lands of Westeros, while an ancient enemy returns after being dormant for millennia.
</div>
</div>
</a>
<a class="gs-card" style="background-image: url(https://resizing.flixster.com/SAICgriG0MpGYUlj7YaLj69cIUY=/ems.ZW1zLXByZC1hc3NldHMvdHZzZWFzb24vUlRUVjczNzIyNC53ZWJw)">
<div class="gs-card-data">
<div class="gs-card-over-header">
Tv Show
</div>
<div class="gs-card-header">
The Boys
</div>
<div class="gs-card-content">
A group of vigilantes set out to take down corrupt superheroes who abuse their superpowers.
</div>
</div>
</a>
<a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BMDdmMTBiNTYtMDIzNi00NGVlLWIzMDYtZTk3MTQ3NGQxZGEwXkEyXkFqcGdeQXVyMzMwOTU5MDk@._V1_.jpg)">
<div class="gs-card-data">
<div class="gs-card-over-header">
Movie
</div>
<div class="gs-card-header">
The Batman
</div>
<div class="gs-card-content">
When a sadistic serial killer begins murdering key political figures in Gotham, Batman is forced to investigate the city's hidden corruption and question his family's involvement.
</div>
</div>
</a>
<a class="gs-card" style="background-image: url(https://www.sonypictures.com/sites/default/files/styles/max_560x840/public/title-key-art/morbius_onesheet_1400x2100_he.jpg?itok=-jQVkWIe)">
<div class="gs-card-data">
<div class="gs-card-over-header">
Movie
</div>
<div class="gs-card-header">
Morbius
</div>
<div class="gs-card-content">
Biochemist Michael Morbius tries to cure himself of a rare blood disease, but he inadvertently infects himself with a form of vampirism instead.
</div>
</div>
</a>
<a class="gs-card" style="background-image: url(https://sysfilessacbe149174fee.blob.core.windows.net/public-container/clients/worthingtheatres/files/d3f93c44-f477-4079-96db-14c2ef40a5f5.jpg)">
<div class="gs-card-data">
<div class="gs-card-over-header">
Movie
</div>
<div class="gs-card-header">
Sonic the Hedgehog 2
</div>
<div class="gs-card-content">
When the manic Dr Robotnik returns to Earth with a new ally, Knuckles the Echidna, Sonic and his new friend Tails is all that stands in their way.
</div>
</div>
</a>
<a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BZmQ1NDZjMTktMjFhZC00ZGY5LWEyMTMtNDhkOWM4NmMyZjI0XkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg)">
<div class="gs-card-data">
<div class="gs-card-over-header">
Movie
</div>
<div class="gs-card-header">
Jurassic World Dominion
</div>
<div class="gs-card-content">
Four years after the destruction of Isla Nublar, dinosaurs now live--and hunt--alongside humans all over the world. This fragile balance will reshape the future and determine, once and for all, whether human beings are to remain the apex predators on a planet they now share with history's most fearsome creatures in a new Era.
</div>
</div>
</a>
</div>
</div>
:root {
--cards-column-gap-gs-blur-cards: 24px;
--cards-row-gap-gs-blur-cards: 24px;
--card-max-height-gs-blur-cards: 400px;
--card-min-height-gs-blur-cards: 200px;
--card-over-header-color-gs-blur-cards: rgba(255, 255, 255, 0.6);
--card-header-color-gs-blur-cards: rgba(255, 255, 255, 0.9);
--card-content-color-gs-blur-cards: white;
--card-hover-transition-speed-gs-blur-cards: 0.3s;
--card-header-font-size-gs-blur-cards: 1.5rem;
--card-over-header-font-size-gs-blur-cards: 0.9rem;
--card-container-padding-gs-blur-cards: 30px;
--card-scroll-thumb-color-gs-blur-cards: #1b1b1b;
--card-scroll-thumb-hover-color-gs-blur-cards: #141414;
--card-on-hover-border-size-gs-blur-cards: 3px;
--card-data-text-shadow-gs-blur-cards: black 1px 0 10px;
--card-border-radius-gs-blur-cards: 10px;
}
* {
margin: 0;
}
.gs-cards-container {
align-items: flex-start;
display: flex;
justify-content: center;
padding: var(--card-container-padding-gs-blur-cards);
background-image: linear-gradient(to right, #0f4667, #2a6973);
}
.gs-cards-container .gs-cards-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: var(--cards-column-gap-gs-blur-cards);
grid-row-gap: var(--cards-row-gap-gs-blur-cards);
max-width: 100%;
width: 100%;
}
@media only screen and (min-width: 320px) {
.gs-cards-container .gs-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 540px) {
.gs-cards-container .gs-cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (min-width: 800px) {
.gs-cards-container .gs-cards-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media only screen and (min-width: 1024px) {
.gs-cards-container .gs-cards-grid {
grid-template-columns: repeat(5, 1fr);
}
}
@media only screen and (min-width: 1900px) {
.gs-cards-container .gs-cards-grid {
grid-template-columns: repeat(6, 1fr);
}
}
.gs-cards-container .gs-cards-grid .gs-card {
display: block;
width: 100%;
min-height: var(--card-min-height-gs-blur-cards);
height: 40vw;
max-height: var(--card-max-height-gs-blur-cards);
border-radius: var(--card-border-radius-gs-blur-cards);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
transition: var(--card-hover-transition-speed-gs-blur-cards);
position: relative;
}
.gs-cards-container .gs-cards-grid .gs-card .gs-card-data {
width: 90%;
height: 95%;
padding: 5%;
border-radius: 10px;
overflow-y: auto;
}
.gs-cards-container .gs-cards-grid .gs-card .gs-card-data .gs-card-header {
color: var(--card-header-color-gs-blur-cards);
font-size: var(--card-header-font-size-gs-blur-cards);
line-height: 1.4;
font-weight: bold;
text-shadow: var(--card-data-text-shadow-gs-blur-cards);
}
.gs-cards-container .gs-cards-grid .gs-card .gs-card-data .gs-card-over-header {
color: var(--card-over-header-color-gs-blur-cards);
font-size: var(--card-over-header-font-size-gs-blur-cards);
margin-bottom: var(--spacing-s);
text-transform: uppercase;
text-shadow: var(--card-data-text-shadow-gs-blur-cards);
}
.gs-cards-container .gs-cards-grid .gs-card:hover {
transform: scale(1.05) translateZ(0);
}
.gs-cards-container .gs-cards-grid .gs-card:hover > .gs-card-data {
background-color: #00000075;
}
.gs-cards-container .gs-cards-grid .gs-card.gs-card-blured {
filter: blur(5px);
}
.gs-cards-container
.gs-cards-grid
.gs-card:hover
> .gs-card-data
.gs-card-content {
opacity: 1;
height: auto;
}
.gs-cards-container .gs-cards-grid .gs-card .gs-card-data .gs-card-content {
color: var(--card-content-color-gs-blur-cards);
word-wrap: break-word;
width: 85%;
padding-top: 10px;
transition: opacity var(--card-hover-transition-speed-gs-blur-cards) ease-out;
opacity: 0;
height: 0;
overflow: hidden;
text-shadow: var(--card-data-text-shadow-gs-blur-cards);
}
.gs-cards-container .gs-cards-grid .gs-card .gs-card-data::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.gs-cards-container
.gs-cards-grid
.gs-card
.gs-card-data::-webkit-scrollbar-track {
background: transparent;
border-radius: 5px;
}
.gs-cards-container
.gs-cards-grid
.gs-card
.gs-card-data::-webkit-scrollbar-thumb {
background: var(--card-scroll-thumb-color-gs-blur-cards);
border-radius: 5px;
}
.gs-cards-container
.gs-cards-grid
.gs-card
.gs-card-data::-webkit-scrollbar-thumb:hover {
background: var(--card-scroll-thumb-hover-color-gs-blur-cards);
}
var allCards = document.getElementsByClassName("gs-card");
for (var i = 0; i < allCards.length; i++) {
allCards[i].addEventListener("mouseover", changeBluredCard, false);
allCards[i].addEventListener("mouseout", changeBluredCard, false);
}
function changeBluredCard() {
let flag = true;
for (var i = 0; i < allCards.length; i++) {
if (allCards[i].matches(":hover")) {
flag = false;
allCards[i].classList.remove("gs-card-blured");
} else {
allCards[i].classList.add("gs-card-blured");
}
}
if (flag) {
for (var i = 0; i < allCards.length; i++) {
allCards[i].classList.remove("gs-card-blured");
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.