CSS Cards with Border and Shadow effects

Card design with outline border and shadow effects on hover in pure CSS

 Techmates    18 Jun, 2019    407

In this article. We will design the Card with outline border and hover shadow effects with pure CSS. 

Let's first start with HTML.

HTML Structure

<div class="card pink">
  <div class="card__image">
    <img src="images/1.jpg">
  </div>
</div>
<div class="card double purple">
  <div class="card__image">
    <img src="images/2.jpg">
  </div>
</div>
<div class="card blue top-bottom">
  <div class="card__image">
    <img src="images/3.jpg">
  </div>
</div>
<div class="card white both">
  <div class="card__image">
    <img src="images/4.jpg">
  </div>
</div>

 

CSS Style

.card {
  position: relative;
  width: 300px;
  height: 375px;
  margin: 0 auto;
  cursor: pointer;
  margin-bottom: 100px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}
.card .card__image {
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}
.card .card__image img {
  width: 300px;
  height: 375px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.card::before, .card::after {
  position: absolute;
  content: '';
  left: -10px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}
.card::before {
  width: 1px;
  height: 100%;
  top: 10px;
}
.card::after {
  width: 100%;
  height: 1px;
  bottom: -10px;
}

/* double */
.card.double .card__image::before, .card.double .card__image::after {
  position: absolute;
  content: '';
  left: -20px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
  background: #70759A;
}
.card.double .card__image::before {
  width: 1px;
  height: 100%;
  top: 20px;
}
.card.double .card__image::after {
  width: 100%;
  height: 1px;
  bottom: -20px;
}
.card.double.pink::before, .card.double.pink::after {
  background: #DC3264;
}
.card.double .card__image:hover::before {
  width: 10px;
}
.card.double .card__image:hover::after {
  height: 10px;
}

/* Bottom */
.card.top-bottom::before {
  top: inherit;
  width: calc(100% - 60px);
  height: 1px;
  left: 30px;
  bottom: -30px;
}
.card.top-bottom.blue::after {
  top: inherit;
  width: calc(100% - 30px);
  height: 1px;
  left: 15px;
  bottom: -15px;
  background: #E7DEDE;
}
.card.top-bottom:hover::before {
  height: 15px;
  width: calc(100% - 60px);
}
.card.top-bottom:hover::after {
  height: 15px;
}
.card.top-bottom .card__image::before, .card.top-bottom .card__image::after {
  position: absolute;
  content: '';
  left: -20px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
  background: #70759A;
}
.card.top-bottom .card__image::before {
  width: calc(100% - 60px);
  height: 1px;
  left: 30px;
  top: -20px;
}
.card.top-bottom .card__image::after {
  width: calc(100% - 30px);
  height: 1px;
  left: 15px;
  top: -10px;
  background: #E7DEDE;
}
.card.top-bottom .card__image:hover::before {
  width: calc(100% - 60px);
  height: 10px;
  background: #92AFD0;
}
.card.top-bottom .card__image:hover::after {
  height: 10px;
  background: #E7DEDE;
}
.card.both .card__image::before, .card.both .card__image::after {
  position: absolute;
  content: '';
  left: -20px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
  background: #E0CDCD;
}
.card.both .card__image::before {
  width: 1px;
  height: 100%;
  right: -10px;
  left: inherit;
  top: -10px;
}
.card.both .card__image::after {
  width: 100%;
  height: 1px;
  top: -10px;
  left: 10px;
}
.card.both.pink::before, .card.both.pink::after {
  background: #DC3264;
}
.card.both .card__image:hover::before {
  width: 10px;
}
.card.both .card__image:hover::after {
  height: 10px;
}

/* Pink card */
.card.pink::before, .card.pink::after {
  background: #DC3264;
}
/* Purple card */
.card.purple::before, .card.purple::after {
  background: #D6A3AC;
}
/* Blue */
.card.blue::before, .card.blue::after {
  background: #92AFD0;
}
/* White */
.card.white::before, .card.white::after {
  background: #fff;
}

.card:hover::before {
  width: 10px;
}
.card:hover::after {
  height: 10px;
}

 

 


Credits / Resources

  • - Pixel Free stock photos: https://www.pexels.com/
  • - Unsplash Free images:



Related Snippets