Animation while cursor hover effect in CSS

Product Display

CSS3 Product Display Template

This template is developed using HTML 5, CSS 3 and must include div factors in Bootstrap which use their classes. It usually displays three products and adjusts them as the device width decreases, for instance when displaying a single product on smartphones. The wow animation which is a jQuery plugin is also used to show the product area with an animation. I used the heart rate value. You can use different values ​​as shown on this page.

To use this template, just copy and paste the section of the products.html page in the area where you want to use it. You must either use the products.css format or simply copy and paste the required classes into your main CSS file. This coding was also included in the multi-product Bootstrap carousel for a separate scheme. 

Live Demo   Download Source Code

Index.html

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>A free Bootstrap / HTML5 / CSS3 product display template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

		<!-- Google Web Fonts -->
        <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>    
        <link href='http://fonts.googleapis.com/css?family=Indie Flower&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
            
        <!--Choco bar Theme CSS style -->
        <link href="css/products.css" rel="stylesheet">     
        
        <link rel="stylesheet" href="css/animate.css">   
        
</head>
	<body >

<!-- Special Products section starts-->
		<div class="section outdiv" id="specialities">
 	     <div class="container">
    	  <div class="col-md-12"><h1 class="text-center wow pulse"><span>Our Specialities</span></h1>
    				<p class="sub-headers text-center">Top rated by customers!</p>
			
                <div class="speciality wow fadeIn" data-wow-delay="0.6s">


	             <div class="spe-prods">
					<div class="mainbox">
						<h3>Special 1</h3>
                        <img class="rotprod" src="img/a1.png" alt="">
					</div>
					<div class="price-big">
						<div>
							<div class="floatting-price">
								<h3>$10</h3>
							</div>
							<div class="month">
								<p>/ piece</p>
							</div>
						</div>
						<div class="ordersection">
								<a href="#" class="buybtn">Order</a>
						</div>
					</div>
				</div>

                
			<div class="spe-prods">
					<div class="mainbox">
						<h3>Special 2</h3>
                        <img class="rotprod"  src="img/a2.png" alt="">
					</div>
				<div class="price-big">
					<div>
						<div class="floatting-price">
							<h3>$30</h3>
						</div>
						<div class="month">
							<p> / 6 piece</p>
						</div>
						
					</div>
					<div class="ordersection">
						<a href="#" class="buybtn">Order</a>
					</div>
				</div>
			</div>
				<div class="spe-prods">
					<div class="mainbox">
						<h3>Special 3</h3>
                        <img class="rotprod" src="img/a3.png" alt="">
					</div>
					<div class="price-big">
					<div>
						<div class="floatting-price">
							<h3>$60</h3>
						</div>
						<div class="month">
							<p> / Dozen</p>
						</div>
					</div>
						<div class="ordersection">
							<a href="#" class="buybtn">Order</a>
						</div>
					</div>
				</div>
              </div>
           </div>   
         </div>
                <div class="space text-center">
                <a class="btn btn-danger btn-lg wow bounceIn" href="https://www.lisenme.com/"><i class="icon-upload-alt"></i>Download Code</a>
                </div>    
       </div>                           
				
<!--Special Products Ending here -->            
  



<!-- Required JavaScript libraris collection -->    
<!--The jQuery library from local-->    
        <script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap library from local -->        
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        
        <!-- In own hosting -->
        <!-- <script src="js/wow.min.js"></script>-->
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
        
<script>
        //Initializing WOW aninations
          new WOW().init();
</script>

	</body>
</html>                    

Products.css

html,
body {
	height: 100%;
    font-family: 'Poiret One', sans-serif;
	height: 100%;
	width: 100%;
	overflow-x:hidden;    
}

/*Headings style*/
h1 {
	color: #FF5B5B;
    font-size: 34px;
	font-weight: 900;
	margin-bottom: 30px;
}
h1 span
{
	color: #271D18;
}
.outdiv{
    background-color:#ead486 !important;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
.sub-headers {
margin-bottom: 30px;
font-family: 'Indie Flower', sans-serif;
margin-top: 20px;
font-size: 24px;
font-weight:500;
}
.section {
	background-color: #ffffff;
	padding: 30px 0;
}

.space {
	padding: 20px 20px;
}
/* Animate */
.rotprod{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow:hidden;
    border:0px solid;
    text-align:right;

    display: block;
    margin-left: auto;
    margin-right: auto;
 
    }  
 
.rotprod:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
} 

/*Displaying special products */
.spe-prods {
    float: left;
    width: 32%;

    text-align: center;
    margin-right: 1%;
    border: 1px solid #eee;
}
.speciality {
    margin: 5% auto 0 auto;
    width: 65%;
}

.mainbox {
    background: #ffffff;
    height:250px;
    padding: 1.5em;
}
.mainbox h3 {
    font-size: 20px;
    padding: 6px;
    color: #42322B;
    text-transform: capitalize;
    font-weight: 400;
	font-family: 'Lato', sans-serif;

  background: #683717; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left,rgba(104,55,23,0.9), rgba(61,45,39,0.1)); /*Safari 5.1-6*/
  background: -o-linear-gradientrgba(104,55,23,0.9), rgba(61,45,39,0.1)); /*Opera 11.1-12*/
  background: -moz-linear-gradientrgba(104,55,23,0.9), rgba(61,45,39,0.1)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgb(197 0 0 / 90%), rgba(61,45,39,0.1)); /*Standard*/

}
.floatting-price {
    float: left;
}

.price-big h3 {
    font-size: 2.5em;
    color: #FFF;
    background: #d40700;
    padding: .27em .5em;
}
.price-big p {
    font-size: .8em;
    font-weight:700;
    text-transform: uppercase;
    color: #fff;
    letter-spacing:1px;
    padding: 2.1em 0;
    background: #4a1616;
}

.ordersection {
    padding: 1em;
    
}
.buybtn {
   font-size: .85em;
    text-transform: uppercase;
    padding: 1em 1em;
    background: #3D2D27;
    color: #fff;
    display: block;
    width: 60%;
    margin: 1.5em auto 0;
    border-radius: 4px;
    font-weight: 700;
    text-decoration:none;
    letter-spacing: 1px;
}
a.buybtn {
   font-size: .85em;
    text-transform: uppercase;
    padding: 1em 1em;
    background: #d40000;
    color: #fff;
    display: block;
    width: 60%;
    margin: 1.5em auto 0;
    border-radius: 4px;
    font-weight: 700;
    text-decoration:none;
    letter-spacing: 1px;
}
a.buybtn:hover {
    background: #BDA297;
    color:#3D2D27;
}
.spe-prods:nth-child(4) {
    margin-right: 0;
}
.price-big {
	padding: 0em 0;
    background: #fff;
}
	/**responsive**/

@media(max-width:1366px){
a.buybtn {
    width: 62%;
}
}
@media(max-width:1280px){
a.buybtn {
    width: 68%;
}
}
@media(max-width:1080px){
.pricing-table {
    margin: 5% auto 0 auto;
    width: 80%;
}
.price-big h3 {
    font-size: 2.3em;
    padding: .35em .5em;
}
a.buybtn {
    font-size: .8em;
}
}
@media(max-width:991px){
.spe-prods {
    float: left;
    width: 32%;
}
.spe-prods-table {
    margin: 5% auto 0 auto;
    width: 98%;
}
.price-big p {
    font-size: .75em;
    padding: 2.3em 0;
}
a.buybtn {
    width: 74%;
}
}
@media(max-width:640px){
.spe-prods {
    float: left;
    width: 49%;
}


.spe-prods:nth-child(2) {
    margin-right: 0;
}
.spe-prods:nth-child(3) {
    margin-top: .5em;
}
.spe-prods:nth-child(4) {
    margin-top: .5em;
}
a.buybtn {
    width: 55%;
}

}
@media(max-width:480px){
.price-bottom ul li {
    font-size: .9em;
}
.spe-prods {
    width: 50%;
    margin-left:-40px;
    width: 250px;
}
}
@media(max-width:320px){
.spe-prods {
    
    margin-left:-50px;
    width: 250px;
    
}

.mainbox {
    background: #BDA297;
    height:250px;
    padding: 1.5em;
    width:100%;
}

.spe-prods:nth-child(2) {
    margin-top: 1em;
}
.spe-prods:nth-child(3) {
    margin-top: 1em;
}
.spe-prods:nth-child(4) {
    margin-top: 1em;
}

a.buybtn {
    width: 60%;
    font-size: .79em;
}
}

.btn-danger {
    color: #fff;
    background-color: #0aa01b !important;
    border-color: #004a14 !important;
}

You May Also Like

About the Author: admin

5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x