Hover to enlarge icon - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover

Description

Hover to enlarge icon

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <meta name="viewport" content="width=device-width"> 
  <style>
@import url(https://www.java2s.com/style/demo/Opera.png);
html {<!--from   w w  w .  j av a2s.c o m-->
   height:100%;
}

body {
   font-family:'Fjalla One', sans-serif;
   background:Chartreuse;
   background:-webkit-linear-gradient(to top, yellow, blue);
   background:linear-gradient(to top, pink, OrangeRed);
}

.icon {
   cursor:pointer;
   display:block;
   -webkit-transform:perspective(2px) translateZ(0);
   transform:perspective(2px) translateZ(0);
   box-shadow:0 0 2px transparent;
   -webkit-transition-duration:0.4s;
   transition-duration:0.4s;
   -webkit-transition-property:box-shadow, transform;
   transition-property:box-shadow, transform;
   vertical-align:middle;
   color:grey;
   border:3px solid BlueViolet;
   border-radius:36px;
   width:161px;
   height:181px;
   margin:11px;
   line-height:181px;
   text-align:center;
   background:Chartreuse;
   background:-webkit-linear-gradient(to bottom, yellow, blue);
   background:linear-gradient(to bottom, pink, OrangeRed);
}

.icon:hover, .icon:focus, .icon:active {
   box-shadow:0 51px 51px -51px grey;
   -webkit-transform:scale(2.2);
   transform:scale(2.2);
}

.icontext {
   text-align:center;
   color:BlueViolet;
   font-size:31px;
}

table {
   border-spacing:61px;
   border-collapse:collapse;
   text-align:center;
}
</style> 
 </head> 
 <body> 
  <h1> </h1> 
  <table align="center"> 
   <tbody> 
    <tr> 
     <td> <span class="icon" id="afspraken">Lorem </span> </td> 
     <td> <span class="icon">Lorem </span> </td> 
     <td> <span class="icon">Lorem </span> </td> 
    </tr> 
    <tr> 
     <td>Lorem ips</td> 
     <td>Lorem i</td> 
     <td>Lorem ips</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials