Galerie de sites avec effet de survol et de flou

2312 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Galerie de sites avec effet de survol et de flou

Recommandé

13 June 2025

illusion de profondeur

19 September 2023

Animation de texte au défilement

19 October 2024

Portfolio de développeur HTML V2

HTML

<!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);
}

Recommandé

illusion de profondeur

Animation de texte au défilement

Portfolio de développeur HTML V2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS