Reveal Card Details on Hover css

Creative card design and reveal card details on card hover using css.

 Techmates    12 Feb, 2020    221

In this article, we will craft the creative card design and reveal card details on card hover using CSS and CSS properties.

HTML Structure

<div class="dd-card left inside">
  <div class="front" dd-bg="images/5.jpg">
    <label class="front-caption caption-l">John Doe</label>
  </div>
  <div class="back">
    <h2 class="dd-title">John Doe</h2>
    <p class="dd-text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sequi natus doloribus voluptatem debitis odio sapiente voluptate architecto. Incidunt, et. Voluptas, voluptates eum!
    </p>
    <ul class="dd-card__link">
      <li>
        <a href="#">
          <img src="svg/facebook.svg" />
        </a>
      </li>
      <li>
        <a href="#">
          <img src="svg/twitter.svg" />
        </a>
      </li>
      <li>
        <a href="#">
          <img src="svg/linkedin.svg" />
        </a>
      </li>
    </ul>
  </div>
</div>

 

To change the card effect you just need to change the main class name that combined with dd-card class. 

List of classes for different effects...

 

-- left(inside)

<div class="dd-card left inside">

-- left(outside)

<div class="dd-card left outside">

 

– Right(inside)

<div class="dd-card right inside">

– Right(outside)

<div class="dd-card right outside">

 

– Top(inside)

<div class="dd-card top inside">

– Top(outside)

<div class="dd-card top outside">

 

– Bottom(inside)

<div class="dd-card bottom inside">

– Bottom(outside)

<div class="dd-card bottom outside">

 

– Info(left)

<div class="dd-card info in-top">

– Info(right)

<div class="dd-card info in-right">

– Info(top)

<div class="dd-card info in-top">

– Info(bottom)

<div class="dd-card info in-bottom">

 

CSS Styles

/*
  Crafted and Designed By DesignDrastic
  Author: DesignDrastic
  License URL: http://designdrastic.com/license
*/

:root {
  --ff-title: 'Lora', serif;
  --ff-text: 'Mukta', sans-serif;
}
.dd-title {
  font-family: var(--ff-title);
  color: #fff;
  font-weight: 600;
}
.dd-text {
  font-family: var(--ff-text);
  font-size: 1.1rem;
  color: #ffffffcc;
}
/* Card */
.dd-card {
  position: relative;
  margin: 0 auto;
  margin-bottom: 100px;
  width: 300px;
  height: 400px;
}
.dd-card .front, .dd-card .back {
  position: relative;
  transition: all .5s;
  width: 100%;
  height: 100%;
}
.dd-card .front {
  transform-origin: bottom;
  transform: perspective(600px) rotateX(0deg);
  top: 0;
  left: 0;
  background-size: cover !important;
  cursor: pointer;
}
.front-caption {
  position: absolute;
  left: 0;
  width: calc(100% - 20px);
  background-color: rgba(0, 0, 0, .6);
  padding: 10px;
  color: #fff;
  font-weight: 500;
  font-family: var(--ff-title);
  font-size: 1.2rem;
  font-weight: 600;
}
.front-caption.caption-t {
  left: 0;
  top: 0;
}
.front-caption.caption-b {
  left: 0;
  bottom: 0;
}
.front-caption.caption-l {
  left: 0;
  height: calc(100% - 20px);
  width: auto;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.front-caption.caption-r {
  left: auto;
  right: 0;
  height: calc(100% - 20px);
  width: auto;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.dd-card .back {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #000;
  color: #fff;
  z-index: 9;
}
.dd-card__link {
  position: absolute;
  bottom: 20px;
  list-style: none;
  padding: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.dd-card__link li {
  display: inline-block;
  margin: 10px;
}
.dd-card__link li a img {
  width: 30px;
  transition: all .5s;
}
.dd-card__link li a:hover img {
  transform: scale(1.2);
}
/* Bottom */
.dd-card.bottom .back {
  top: 100%;
  transform: perspective(600px) rotateX(-90deg);
  transform-origin: top;
}
.dd-card.bottom.inside .back {
  top: 0;
}
.dd-card.bottom:hover .back {
  transform: perspective(0) rotateX(0deg);
}
/* Top */
.dd-card.top .front {
  transform-origin: top;
}
.dd-card.top .back {
  top: -100%;
  transform: perspective(600px) rotateX(90deg);
  transform-origin: bottom;
}
.dd-card.top.inside .back {
  top: 0;
}
.dd-card.top:hover .back {
  transform: perspective(0) rotateX(0deg);
}
/* Left */
.dd-card.left .front {
  transform-origin: left;
}
.dd-card.left .back {
  transform-origin: right;
  left: -100%;
  transform: perspective(600px) rotateY(-90deg);
}
.dd-card.left.inside .back {
  left: 0;
}
.dd-card.left:hover .back {
  transform-origin: right;
  transform: perspective(0) rotateY(0deg);
}
/* Right */
.dd-card.right .front {
  transform-origin: right;
}
.dd-card.right .back {
  transform-origin: left;
  left: 100%;
  transform: perspective(600px) rotateY(90deg);
  z-index: 9;
}
.dd-card.right.inside .back {
  left: 0;
}
.dd-card.right:hover .back {
  transform-origin: left;
  transform: perspective(0) rotateY(0deg);
}
/* Info */
.dd-card.info {
  overflow: hidden;
}
.dd-card.info .back {
  height: auto;
  border-radius: 4px;
}
/* Left */
.dd-card.info.in-left .back {
  top: 20px;
  bottom: 20px;
  left: -100%;
  width: calc(100% - 20px);
  transform: scaleY(.6);
}
.dd-card.info.in-left:hover .back {
  left: 0;
  transform: scaleY(1);
}
/* Right */
.dd-card.info.in-right .back {
  right: -100%;
  top: 20px;
  left: inherit;
  bottom: 20px;
  width: calc(100% - 20px);
  transform: scaleY(.6);
}
.dd-card.info.in-right:hover .back {
  right: 0;
  transform: scaleY(1);
}
/* Top */
.dd-card.info.in-top .back {
  top: -100%;
  left: 20px;
  right: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  transform: scaleX(1.2);
}
.dd-card.info.in-top:hover .back {
  top: 0;
  transform: scaleX(1);
}
/* Bottom */
.dd-card.info.in-bottom .back {
  bottom: -100%;
  top: inherit;
  left: 20px;
  right: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  transform: scaleX(1.2);
}
.dd-card.info.in-bottom:hover .back {
  bottom: 0;
  transform: scaleX(1);
}

 

I hope you find something useful from the snippet.

 


Credits / Resources

  • Pexels Free Stock Photos: https://www.pexels.com/
  • Google Fonts: http://fonts.google.com/
  • jQuery: https://jquery.com/



Related Snippets