<!-- HTML Setup -->
<section>
	<!-- heading -->
	<div class="container">
		<div class="row">			
			<div class="mx-auto">
				<div class="col-lg-12">				
					<h1 class="display-2 heading-big heading-big-square text-center">Hover Cards Transition Animation</h1>										
				</div>
			</div>
		</div>
	</div>
	
	<!-- cards -->
	<div class="container">
		<div class="row">			
			<div class="mx-auto">
				<div class="col-lg-12">
					<div class="text-center my-3">
						<h6 class="text-center my-5">Transform Transition cards samples</h6>						
						<div class="card-deck no-gutters">

							<div class="col-12 col-sm-6 col-md-6 col-lg-3">
								<div class="card h-100 mb-4">                    
									<div class="card-header">                                
										<h5 class="card-title m-0 p-0 font-weight-bolder text-secondary">Connected Devices and Sensors</h5>
									</div>
									<div class="card-body text-left">
										<p class="card-text">Arduino, Raspbery, Watson or Adafruit </p>
										<span class="font-lead-base font-weight-bold text-muted">20% Off!</span>
										<div class="promotion-promo">$ 11.5</div>
										<div class="promotion-price">
											<div class="promotion-price-desc">Now</div>
											<div class="promotion-price-text">$ 9.5</div>                                    
										</div>
									</div>
									<div class="card-footer"><a href="#" class="btn btn-warning">Order</a></div>
								</div>
							</div>

							<div class="col-12 col-sm-6 col-md-6 col-lg-3">
								<div class="card h-100 mb-4">                    
									<div class="card-header">                                
										<h5 class="card-title m-0 p-0 font-weight-bolder text-secondary">IOT Big Data Analytics</h5>
									</div>
									<div class="card-body text-left">
										<p class="card-text">Big Data and Analytics Dashboard for sensor projects.</p>
										<span class="font-lead-base font-weight-bold text-muted">20% Off!</span>
										<div class="promotion-promo">$ 22.23</div>
										<div class="promotion-price">
											<div class="promotion-price-desc">Now</div>
											<div class="promotion-price-text">$ 20.23</div>                                    
										</div>
									</div>
									<div class="card-footer"><a href="#" class="btn btn-warning">Order</a></div>
								</div>
							</div>

							<div class="col-12 col-sm-6 col-md-6 col-lg-3">
								<div class="card h-100 mb-4">                    
									<div class="card-header">                                
										<h5 class="card-title m-0 p-0 font-weight-bolder text-secondary">Device Data Counter Status</h5>
									</div>
									<div class="card-body text-left">
										<p class="card-text">Up to 500 registered devices, data analyzed per month.</p>
										<span class="font-lead-base font-weight-bold text-muted">20% Off!</span>
										<div class="promotion-promo">$ 12.2</div>
										<div class="promotion-price">
											<div class="promotion-price-desc">Now</div>
											<div class="promotion-price-text">$ 10.2</div>                                    
										</div>
									</div>
									<div class="card-footer"><a href="#" class="btn btn-warning">Order</a></div>
								</div>
							</div>

							<div class="col-12 col-sm-6 col-md-6 col-lg-3">
								<div class="card h-100 mb-4">                    
									<div class="card-header">                                
										<h5 class="card-title m-0 p-0 font-weight-bolder text-secondary">Enterprise Edition Package</h5>
									</div>
									<div class="card-body text-left">
										<p class="card-text">All features with cloud storage and Full support.</p>
										<span class="font-lead-base font-weight-bold text-muted">20% Off!</span>
										<div class="promotion-promo">$ 10</div>
										<div class="promotion-price">
											<div class="promotion-price-desc">Now</div>
											<div class="promotion-price-text">$ 8</div>                                    
										</div>
									</div>
									<div class="card-footer"><a href="#" class="btn btn-warning">Order</a></div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
	<!-- cards::before -->
	<div class="container">
		<h6 class="text-center my-5">Transform Transition cards background samples</h6>
		<div class="row">
			<div class="col-lg-12">
				<div class="row card-animate">
					<div class="col-4">
						<div class="card border">								
							<div class="card-body">
								<div class="card-title">
									Card Title 1
								</div>
								<p class="card-text">Card Body</p>
							</div>
						</div>
					</div>
					<div class="col-4">
						<div class="card border">								
							<div class="card-body">
								<div class="card-title">
									Card Title 2
								</div>
								<p class="card-text">Card Body</p>
							</div>
						</div>
					</div>
					<div class="col-4">
						<div class="card border">								
							<div class="card-body">
								<div class="card-title">
									Card Title 3
								</div>
								<p class="card-text">Card Body</p>
							</div>
						</div>
					</div>
				</div>				
			</div>
		</div>		
	</div>
</section>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800%7CRaleway:100,200,300,400,600,700,800,900%7CMontserrat:100,200,300,400,500,600,700,800,900');

// Variables
$font-family-base : 'Raleway', sans-serif;
$font-family-head-base : 'Nothing You Could Do', cursive; // Custom
$font-family-lead-base : 'Montserrat', sans-serif; // Custom
// colors
$white:    #fff !default;
$warning : #ffc107;
// Font Weight Base
$font-weight-light:           100 !default;
$font-weight-normal:          500 !default;
$font-weight-bold:            700 !default;
$font-weight-bolder:          900 !default;
// Box Shadow Placeholer and Class
// -- Placeholder -- box shadow default
%box-shadow {
	box-shadow: 0px 0px 18px -3px rgba(143, 143, 143, .50);
}
%box-shadow-hover {
	box-shadow: 0px 0px 20px -3px rgba(143, 143, 143, .75);
}
// -- Placeholder -- box shadow dark
%box-shadow-dark {
	box-shadow: 3px 3px 11px -3px rgba(0, 0, 0, .25);
}
%box-shadow-dark-hover {
	box-shadow: 3px 3px 11px -3px rgba(0, 0, 0, .75);
}
// -- Class Default -- Box Shadow Default Class
.box-shadow {
	@extend %box-shadow;
}
// -- Class Dark -- Box Shadow Dark Class
.box-shadow-dark {
	@extend %box-shadow-dark;
}

body { background-color: yellow; font-family: 'Open Sans', Arial, Verdana; }
section { padding-top: 2rem; padding-bottom: 2rem; }
h6 { color: #990000; }
// Adding font-weight-bolder
.font-weight-bolder {
  font-weight: $font-weight-bolder;
}
// Display override
.display-1, .display-2, .display-3, .display-4 {
  font-weight: 900;
}
.heading {
	&-big {
		font-weight: 800;
		text-transform: uppercase;
		color: red;
		margin: 0;
		padding: .15rem 0;
		line-height: 1.2;
		font-size: 2rem;
		&-square { padding: 1rem 1rem; border: 10px solid red; margin: .5rem auto 1rem auto; }
		transition: color .5s ease-in, border-color .5s ease-in-out;
		&:hover {
			color: #ff9900;			
			border-color: #ff9900;
		}
	}
}

.card {
  transition: .5s ease;
  border-radius: 0;
  transform: perspective(3em) rotateX(0deg) rotateY(-1.175deg) rotateZ(-1deg);
  &-header {
    border-radius: 0;
  }
  &-footer {
    padding-top:1rem;
    padding-bottom:1rem;
  }
  &-header, &-footer {
    transition: .5s ease;
  }
  &:hover {
    @extend %box-shadow-hover;        
    border-color:darken($warning,0%);
	 transform: perspective(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    .card-header, .card-footer {
      color: darken($warning,15%);
      border-color: darken($warning,0%);
      background-color: lighten($warning,35%);
    }
    .promotion-promo {
      transform: scale(1.175) translateY(2.5px);
      transform-origin: left center;
    }
    .promotion-price {
      transform: translate(2.5px,17.5px) scale(1.15);
      transform-origin: center right;
    }
  }
  &-body {
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .btn {
    font-weight: bold;
    text-transform: uppercase;
  }
}

.promotion {
  &-promo {
		font-weight: $font-weight-bold;
		font-size: 1.15rem;
		color: $warning;
		font-family: $font-family-lead-base;
		text-decoration: line-through;
		transition: .25s linear;
	}
  &-price {
		position: absolute;
		bottom: 0;
		right: 0;
		background: $warning;
		width: 92px;
		height: 92px;
		padding-bottom: 0rem;
		padding-top: 1.25rem;
		text-align: center;
		font-weight: $font-weight-bold;
		font-family: $font-family-lead-base;
		font-size: 1.1rem;
		border-radius: 5rem;
		color: $white;
		z-index: -1;
		transform: translate(5px,27.5px) rotate(-9deg);
      border: 1px dashed $white;
      transition: .25s linear;
      line-height: 1.15;
    &-desc {
      padding: 0;
      margin: 0 auto;
      text-transform: uppercase;
      font-size: .9rem;
      display: block;
    }
    &-text { 
      padding: 0;
      margin: 0 auto;
      font-weight: $font-weight-bolder;
    }
	}
}

.card-animate {
	counter-reset: section;
	.card-body {
		&:before {
			transition: .5s ease;
			counter-increment: section;
			content: "" counter(section) "";
			display: block;
			font-size: 15rem;
			font-weight: 900;
			position: absolute;
			bottom: 5rem;
			line-height: 0;
			left: -.85rem;
			padding: 0;
			margin: 0;
			color: rgba(0,0,0,.10);
			z-index: 0;
		}
	}
	.card {
		&:hover {
			.card-body {
				&:before {
					transform: translate(10px,-10px);
				}
			}
		}
	}
	.card-text {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
	.card-title {
		font-weight: 900;
		text-transform: uppercase;
	}
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css
  3. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js