how to create a icon showing hover effect

      No Comments on how to create a icon showing hover effect

how to create a icon showing hover effect:


how to create a icon showing hover effect


Scanfcode
40000

how to create a icon showing hover effect

HTML:

<div class="main_img_hover">
 <div class="img_hover">
 <img src="images.jpg"/>
 </div>
 <div class="effect">
 <button class='btn btn_on_hover'><span class="glyphicon glyphicon-shopping-cart"></span></button>
 <button class='btn btn_on_hover' id='second'><span class="glyphicon glyphicon-star"></span></button>
 <button class='btn btn_on_hover' id='third'><span class="glyphicon glyphicon-send"></span></button>
 </div>
 <div class="detail">
 <span id='heading_sc'>Scanfcode</span>
 <span><span>&#8377;</span><span id='unit'>40000</span></span>
 </div>
</div>

CSS:

@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:400,700');


/* styling for the outer div */
.main_img_hover
{
   font-family: 'Fira Sans Extra Condensed', Arial, sans-serif;
   background-color:#fff;
   width:250px;
   border-radius:2px;
   box-shadow:0px 1px 7px 0px #000;
   position:relative;
}


/* styling div containing image */
.img_hover
{
 width:250px;
}


/* styling div containing details-heading,price */
.detail
{
  padding:0px 10px;
}
.detail span
{
  font-size:14px; 
  color:#333;
}
#unit
{
  color:#0065de;
  font-size:20px;
  margin-left:3px;
}
#heading_sc
{
  font-size:25px;
  width:100%;
}


/* div containing buttons the display on hover */
.effect
{
  position:absolute;
  width:100%;
  top:10px;
  left:15px;
  z-index:2; 
}


/* button with icons */
.btn_on_hover
{
  border:solid 0px #fff;
  width:30px;
  background-color:#fff;
  height:30px;
  color:#000;
  text-align:left;
  padding:7px;
  margin:6px 0px;
 
 /* timing for the hover transition */
 -webkit-transition: all 0.35s ease;  
  transition: all 0.35s ease;
 
  /* for moving effect of buttons */
  -webkit-transform: translateY(60%);
  transform: translateY(60%);
  opacity: 0;
}


/* animating on hover - the moving effect */
.main_img_hover:hover .btn_on_hover
{
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}


/* delays the animation for second and third child */
.main_img_hover:hover #second
{
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.main_img_hover:hover #third
{
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.btn_on_hover:hover
{
  background-color:#0065de;
}
.btn_on_hover:hover .glyphicon
{
  color:#fff;
}

Leave a Reply

Your email address will not be published. Required fields are marked *