Copied to Clipboard!
CSS Cards with border and shadow effects
.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 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;
}
.card.pink::before, .card.pink::after {
background: #DC3264;
}
.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 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;
}
.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;
}
.card.purple::before, .card.purple::after {
background: #D6A3AC;
}
.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 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;
}
.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.blue::before, .card.blue::after {
background: #92AFD0;
}
.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 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;
}
.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;
}
.card.white::before, .card.white::after {
background: #fff;
}