Image Cards CSS

Espectacular Image Cards CSS solo con CSS y HTML para insertar en nuestro Blog de gran calidad y el cual es responsive.

CODIGO HTML

 

<!-- YouTube reference: Angela Delise -->
<body>
  <div class="wrapper">

    <!-- BEAR profile card below -->
    <div class="card">
      <div class="card-banner">
        <p class="category-tag popular">POPULAR</p>
        <img class="banner-img" src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzc4ODQ0OQ&ixlib=rb-1.2.1&q=85" alt="flower">
      </div>
      <div class="card-body">
        <p class="blog-hashtag">#cutedog #fluffyboy</p>
        <h2 class="blog-title">Bear the Samoyed Dog</h2>
        <p class="blog-description">Fun slice of life of our family dog! Cute fluffy white doggie!</p>
        <div class="card-profile">
          <img class="profile-img" src="https://studio.code.org/v3/files/-SYe2p0IkJ3MD4N4pBv251F2quUy9fc_el85X8TL-4E/bunny-dog-PIXEL.png?t=1623275156997" alt="bear">
          <div class="card-profile-info">
            <h3 class="profile-name">BEAR</h3>
            <p class="profile-followers">1.3k followers</p>
          </div>
        </div>
      </div>
    </div>
    <!-- BEAR profile card above -->

    <div class="card">
      <div class="card-banner">
        <p class="category-tag tech">TECH</p>
        <img class="banner-img" src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzc4ODQwOQ&ixlib=rb-1.2.1&q=85" alt="codes">
      </div>
      <div class="card-body">
        <p class="blog-hashtag">#coding #freecodecamp</p>
        <h2 class="blog-title">Cool Coders</h2>
        <p class="blog-description">FreeCodeCamp is Good! Learn Programming. Front-End Web Developer.</p>
        <div class="card-profile">
          <img class="profile-img" src="https://studio.code.org/v3/files/-SYe2p0IkJ3MD4N4pBv251F2quUy9fc_el85X8TL-4E/sockBlack.png?t=1622768480891" alt="black-sock">
          <div class="card-profile-info">
            <h3 class="profile-name">BLACK SOCK</h3>
            <p class="profile-followers">1.3k followers</p>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-banner">
        <p class="category-tag home">HOME</p>
        <img class="banner-img" src="https://images.unsplash.com/photo-1432821596592-e2c18b78144f?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzc4ODQ4NA&ixlib=rb-1.2.1&q=85" alt="typewriter">
      </div>
      <div class="card-body">
        <p class="blog-hashtag">#home #relaxing</p>
        <h2 class="blog-title">Home DIY</h2>
        <p class="blog-description">Peaceful at Home. Chill and Relax. Nice and Calm.</p>
        <div class="card-profile">
          <img class="profile-img" src="https://studio.code.org/v3/files/73u_ffL_PsekqL959kZL5DSKZZYB1jpi0kaeYRIb4Ds/sockLemon.png" alt="light-yellow-sock">
          <div class="card-profile-info">
            <h3 class="profile-name">LEMON SOCK</h3>
            <p class="profile-followers">1.3k followers</p>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-banner">
        <p class="category-tag city">CITY LIFE</p>
        <img class="banner-img" src="https://images.unsplash.com/photo-1622691313884-c376d350813f?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzg4MjEwOA&ixlib=rb-1.2.1&q=85" alt="city">
      </div>
      <div class="card-body">
        <p class="blog-hashtag">#urban #cityscape</p>
        <h2 class="blog-title">USA cities</h2>
        <p class="blog-description">Urban lifestyle, visit all the cool places in the city! The city that never sleeps.</p>
        <div class="card-profile">
          <img class="profile-img" src="https://images.unsplash.com/photo-1621073635299-5a954fc5d5e9?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzg4MjI2OQ&ixlib=rb-1.2.1&q=85" alt="bear">
          <div class="card-profile-info">
            <h3 class="profile-name">CA - LA</h3>
            <p class="profile-followers">1.3k followers</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Cat profile card below -->
    <div class="card">
      <div class="card-banner">
        <p class="category-tag cat">CATS</p>
        <img class="banner-img" src="https://images.unsplash.com/flagged/photo-1557427705-88c1e5a11a52?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzg4MjYxMw&ixlib=rb-1.2.1&q=855" alt="cats">
      </div>
      <div class="card-body">
        <p class="blog-hashtag">#cutecat #softkitty</p>
        <h2 class="blog-title">CUTE CATS</h2>
        <p class="blog-description">Soft kitty, warm kitty, little ball of fur, happy kitty, sleepy kitty, pur pur pur.</p>
        <div class="card-profile">
          <img class="profile-img" src="https://images.unsplash.com/photo-1594473198611-9ef233fc7850?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzg4MjYzNg&ixlib=rb-1.2.1&q=85" alt="kitten">
          <div class="card-profile-info">
            <h3 class="profile-name">KITTENS</h3>
            <p class="profile-followers">1.3k followers</p>
          </div>
        </div>
      </div>
    </div>
    <!-- Cat profile card above -->

    <!-- Art profile card below -->
    <div class="card">
      <div class="card-banner">
        <p class="category-tag art">ART</p>
        <img class="banner-img" src="https://images.unsplash.com/photo-1535673774336-ef95d2851cf3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzg4Mjg3Mw&ixlib=rb-1.2.1&q=85" alt="art">
      </div>
      <div class="card-body">
        <p class="blog-hashtag">#creative #artistic</p>
        <h2 class="blog-title">The Painter</h2>
        <p class="blog-description">Spread your Creativity. Paint your life with positivity.</p>
        <div class="card-profile">
          <img class="profile-img" src="https://images.unsplash.com/photo-1561002515-3aa8c1fdba2b?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzg4Mjg5Mg&ixlib=rb-1.2.1&q=85" alt="artist">
          <div class="card-profile-info">
            <h3 class="profile-name">Artist</h3>
            <p class="profile-followers">1.3k followers</p>
          </div>
        </div>
      </div>
    </div>
    <!-- Art profile card above -->

  </div>
</body>

CODIGO CSS

<style>
  
:root {
  --clr-gray-light: #ede7f6;
  --clr-gray-med: #455a64;
  --clr-gray-dark: #263238;
  --clr-link: #304ffe; /*hashtag color*/
  --clr-popular: violet;
  --clr-tech: #76ff03;
  --clr-psyche: #ffee58;
}

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

body {
  margin: 2rem;
  color: var(--clr-gray-dark);
}
.wrapper {
  /*inclue all profile card*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  overflow: hidden;
  box-shadow: 0px 2px 20px var(--clr-gray-dark);
  background: #eceff1; /*all 3 cards background color*/
  border-radius: 0.5rem;
  position: relative;
  width: 350px;
  margin: 1rem;
  transition: 250ms all ease-in-out; /*smooth effects*/
  cursor: pointer;
}
.card:hover {
  transform: scale(1.06);
  box-shadow: 0px 2px 40px var(--clr-gray-light);
}
.banner-img {
  position: absolute;
  object-fit: cover;
  height: 14rem;
  width: 100%;
}
.category-tag {
  font-size: 1rem;
  font-weight: bold;
  color: black; /*3 category text color, in the category box*/
  padding: 0.5rem 1.3rem 0.5rem 1rem;
  position: absolute;
  z-index: 1; /* class="category-tag popular" box size*/
  top: 1rem; /* class="category-tag popular" position the box to be lower*/
  border-radius: 0 2rem 2rem 0; /*curve the category box corners*/
}

.popular {
  background: var(--clr-popular); /*category-tag POPULAR box color*/
}
.tech {
  background: var(--clr-tech); /*category-tag TECH box color*/
}
.home {
  background: var(--clr-psyche); /*category-tag HOME box color*/
}
.city {
  background: grey; /*category-tag CITY box color*/
}
.cat {
  background: orange;
}
.art {
  background: violet;
}

.card-body {
  margin: 15rem 1rem 1rem 1rem;
}
.blog-hashtag {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-link);
}
.blog-title {
  line-height: 1.5rem;
  margin: 1rem 0 0.5rem;
}
.blog-description {
  color: var(--clr-gray-med);
  font-size: 1rem;
}

.card-profile {
  /*Include profile-img, profile-info, name & followers*/
  display: flex; /*Make image & text side by side*/
  margin-top: 1.5rem; /*space between description & profile-card*/
  align-items: center; /*make profile text position center in middle*/
  background: #c8e6c9; /*color bacnground contains image, name & followers*/
}

.profile-img {
  /*all 3 profile images*/
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%; /*make image circle*/
}
.card-profile-info {
  margin-left: 1rem; /*make space between profile text & image*/
}
.profile-name {
  font-size: 1rem;
}
.profile-followers {
  color: var(--clr-gray-med);
  font-size: 0.9rem;
}

</style>

REALIZADO POR: Audrey-Chin

ORIGEN DE LA ENTRADA: https://codepen.io/Audrey-Chin/pen/mdWGVKV