Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

10 February 2025

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

Recomendado

Um código por bachir123

Um código por smartarray391

informações do cartão

HTML

CSS

JS

Recomendado

Um código por bachir123

Um código por smartarray391

informações do cartão

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS