CSS 3 animation "transform: scale" on column element - HTML CSS CSS Property

HTML CSS examples for CSS Property:transform

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. transform

Description

CSS 3 animation "transform: scale" on column element

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.column-wrap {<!--from  w w  w.ja  va 2  s .  c o  m-->
   -webkit-columns: 3;
   columns: 3;
}
.column-item {
   background-color: red;
}
.column-img-wrap {
   margin: 0;
   overflow: hidden;
   -webkit-backface-visibility: hidden;
}
.column-img {
   display: block;
   max-width: 100%;
   -webkit-transform: scale(1);
   transform: scale(1);
   transition: -webkit-transform .3s ease;
   transition: transform .3s ease;
   transition: transform .3s ease, -webkit-transform .3s ease;
   -webkit-backface-visibility: hidden;
}
.column-img:hover {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="column-wrap"> 
   <article class="column-item"> 
    <figure class="column-img-wrap"> 
     <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="" class="column-img"> 
    </figure> 
    <h2>Hello world</h2> 
    <p>Lorem ipsum loreat</p> 
   </article> 
   <article class="column-item"> 
    <figure class="column-img-wrap"> 
     <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt="" class="column-img"> 
    </figure> 
    <h2>Hello world</h2> 
    <p>Lorem ipsum loreat</p> 
   </article> 
   <article class="column-item"> 
    <figure class="column-img-wrap"> 
     <img src="https://www.java2s.com/style/demo/Opera.png" alt="" class="column-img"> 
    </figure> 
    <h2>Hello world</h2> 
    <p>Lorem ipsum loreat</p> 
   </article> 
  </div>  
 </body>
</html>

Related Tutorials