Galerie de sites avec effet de survol et de flou

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

27 May 2025

Page "404 introuvable" avec CSS

26 December 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Andev Web</title>
  <link rel="stylesheet" href="style.css">
<body>
  <div class="cards">
  
    
    <a href="#" class="card">
      <div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1610375233612-d6a66ac3af99?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1047&q=80)"></div>
      <div class="card-content">
        <p>Travel</p>
        <h3>Japón</h3>
      </div>
    </a>
    
    
    <a href="#" class="card">
      <div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1593971657261-184f7a3a72de?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80)"></div>
      <div class="card-content">
        <p>Travel</p>
        <h3>USA</h3>
      </div>
    </a>
    
    
    <a href="#" class="card">
      <div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1532465614-6cc8d45f647f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80)"></div>
      <div class="card-content">
        <p>Travel</p>
        <h3>France</h3>
      </div>
    </a>
    
    
    <a href="#" class="card">
      <div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1502003148287-a82ef80a6abc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80)"></div>
      <div class="card-content">
        <p>Travel</p>
        <h3>Canada</h3>
      </div>
    </a>
    
  </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
}

body {
  background: #131416;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin: auto;
  width: 100%;
  max-width: 1200px;
  grid-gap: 24px;
  padding: 16px; 
}

@media (min-width: 540px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  position: relative;
  padding-bottom: 150%;
}

.card-background {
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: 24px;
  filter: brightness(.75) saturate(1.2) contrast(.85);
  transition: .3s;
}

.card-content {
  position: absolute;
  padding: 24px;
  font-family: arial, sans-serif;
  color: white;
}

.card-content p {
  color: rgba(255, 255, 255, .6);
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: .9rem;
}

.card-content h3 {
  font-size: 1.9rem;
  color: rgba(255, 255, 255, .9);
  text-shadow: 2px 2px 20px rgba(0, 0, 0, .2);
}

.card:hover .card-background {
  transform: scale(1.05);
}

.cards:hover > .card:not(:hover) > .card-background {
  filter: brightness(.5) saturate(0) contrast(1.2) blur(20px);
}

Galerie de sites avec effet de survol et de flou

Recommandé

Un code par mironovbogdan341

Page "404 introuvable" avec CSS

Un code par efficientcloud646

HTML

CSS

JS

Recommandé

Un code par mironovbogdan341

Page "404 introuvable" avec CSS

Un code par efficientcloud646

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS