"scale and rotate image" when hovering over text as well - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover Image

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

Description

"scale and rotate image" when hovering over text as well

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">
.category_images {<!--from  w ww.  ja va 2  s .c  o m-->
   margin:0 auto
}

.category_images_item {
   width:401px;
   height:401px;
   position:relative;
   background-color:Chartreuse;
   overflow:hidden;
   transition:all .9s ease;
   margin:11px;
   float:left
}

.category_images_item span {
   color:yellow;
   font-weight:bold;
   font-size:51px;
   font-style:italic;
   z-index:100;
   position:absolute;
   width:100%;
   text-align:center;
   top:151px;
   pointer-events:none;
}

.category_images_img {
   background-size:cover;
   width:401px;
   height:401px;
   transition:all .9s ease;
   opacity:0.8
}

.category_images_img:hover {
   transform:scale(2.4) rotate(-2deg);
   opacity:0.6
}

.category_images_item a {
   display:block;
}
</style> 
 </head> 
 <body> 
  <div class="category_images"> 
   <!--First image--> 
   <div class="category_images_item"> 
    <a href=""> <span>Lorem i</span> 
     <div class="category_images_img" style="background:url(https://www.java2s.com/style/demo/InternetExplorer.png) no-repeat center;background-size:cover;"> 
     </div> </a> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials