<div class="container">
<div class="container-cards">
<div class="card" style="background-image: url('https://source.unsplash.com/random/1');">
<a href="./"><strong>URL</strong></a>
</div>
<div class="card" style="background-image: url('https://source.unsplash.com/random/4');">
<a href="./"><strong>URL</strong></a>
</div>
<div class="card" style="background-image: url('https://source.unsplash.com/random/5');">
<a href="./"><strong>URL</strong></a>
</div>
<div class="card" style="background-image: url('https://source.unsplash.com/random/6');">
<a href="./"><strong>URL</strong></a>
</div>
<div class="card" style="background-image: url('https://source.unsplash.com/random/7');">
<a href="./"><strong>URL</strong></a>
</div>
</div>
</div>
.container {
width: 90vw;
margin: auto;
}
.container-cards {
display: flex;
flex-direction: row;
width: 100%;
column-gap: 1rem;
}
.card {
flex-grow: 1;
height: 300px;
background-color: gray;
border-radius: 1rem;
position: relative;
overflow: hidden;
transition: flex-grow .5s ease;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: filter 0.3s ease;
z-index: 1;
}
.card:nth-child(1)::before {
background-image: url('https://source.unsplash.com/random/1');
}
.card:nth-child(2)::before {
background-image: url('https://source.unsplash.com/random/2');
}
.card:nth-child(3)::before {
background-image: url('https://source.unsplash.com/random/3');
}
.card:nth-child(4)::before {
background-image: url('https://source.unsplash.com/random/4');
}
.card:nth-child(5)::before {
background-image: url('https://source.unsplash.com/random/5');
}
.card:nth-child(6)::before {
background-image: url('https://source.unsplash.com/random/6');
}
.card:nth-child(7)::before {
background-image: url('https://source.unsplash.com/random/7');
}
.card a {
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);
opacity: 0;
transition: opacity 0.3s ease;
text-decoration: none;
color: black;
z-index: 2;
}
.card:hover::before {
filter: blur(5px);
box-shadow: inset 0 0 90px #000;
}
.card:hover a {
opacity: 1;
}
.card:hover {
flex-grow: 7;
}
Napsat komentář