Zoom CSS3 <li> element over another - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Zoom

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Zoom

Description

Zoom CSS3 <li> element over another

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.thumb>li a {
   border-width:2px;
   border-style:solid;
   border-image:none;
   border-color:Chartreuse;
   margin:3px;
   position:relative;
   transition:all 0.4s ease 0s;
   display:block;
}

.thumb>li a:hover {
   border-color:yellow;
   box-shadow:0px 0px 8px blue;<!--  ww w  .ja va 2s  .com-->
   text-decoration:none;
   outline:medium none;
   transition:all 0.4s ease 0s;
   transform:scale(2.4);
   background-color:pink;
   z-index:2;
}

.thumb {
   list-style:outside none none;
   margin:3px 0px 0px;
   padding:6px 0px 0px;
}

.thumb>li {
   width:47%;
   margin-left:11px;
   margin-right:11px;
   padding:11px 0px 0px;
   max-width:201px;
   box-sizing:border-box;
   transition:all 0.4s ease 0s;
}

img {
   max-width:100%;
   height:auto;
}

.thumb .title {
   font-size:15px;
   padding:6px 4px;
   text-align:center;
}
</style> 
 </head> 
 <body> 
  <ul class="thumb"> 
   <li> <a title="test" href="test.com"> <img class="cover" alt="test" src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
     <div class="title">
       Lorem 
     </div> </a> </li> 
   <li> <a title="test" href="test.com"> <img class="cover" alt="test" src="https://www.java2s.com/style/demo/Firefox.png"> 
     <div class="title">
       Lorem i 
     </div> </a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials