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.

See the Pen Image Cards CSS by Audrey Chin (@Audrey-Chin) on CodePen.

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

Bienvenidos !

Suscripción

Sociales

Personalización de Blogger

Diseño de Blogger

Aqui el titulo

Aqui el titulo

Menu vertical.

Foto de perfil

Recomendar web por correo

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

CODIGO CSS

No hay comentarios:

Publicar un comentario

¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

Author Details

Archivo del blog

Popular

Recent

Comments

Tags

LA MILLOR TERRA DEL MON

HOJA DEL LUNES

VALENCIA BONITA

SENDAS Y LEYENDAS

EL ESPAÑOL

LES MUNTANYES

INFORMACION

ALICANTE PLAZA

LAS PROVINCIAS

Formulario de contacto

Vistas de página en total

Bienvenidos !

Suscripción

Sociales

Personalización de Blogger

Diseño de Blogger

Aqui el titulo

Aqui el titulo

Menu vertical.

Foto de perfil

Recomendar web por correo

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

CODIGO CSS

No hay comentarios:

Publicar un comentario

¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

Author Details

Socialize

Archivo del blog

Popular

Recent

Comments

Tags

LA MILLOR TERRA DEL MON

HOJA DEL LUNES

VALENCIA BONITA

SENDAS Y LEYENDAS

EL ESPAÑOL

LES MUNTANYES

INFORMACION

ALICANTE PLAZA

LAS PROVINCIAS

Formulario de contacto

Vistas de página en total