make entire group change color on hover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

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

Description

make entire group change color on hover

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">

.cheese {<!--from www.  j  a v  a2  s . c  o m-->
   background-color: #4D4D4D;
   -webkit-box-shadow: 1px 1px 15px red;
   box-shadow: 1px 1px 15px red;
   color: #FFF;
}
.cheese p {
   color: #FFF;
}
.cheese:hover, .cheese:active, .cheese:focus, .cheese :hover, .cheese :active, .cheese :focus {
   text-decoration: none;
   background-color: #43A6CB;
}
.cheese a img:hover {
   background: blue;
}


      </style> 
 </head> 
 <body> 
  <center> 
   <figure class="cheese"> 
    <a class="cheese" href=""> 
     <center> 
      <img src="https://www.java2s.com/style/demo/Google-Chrome.png" width="400" height="398" alt=""> 
     </center> 
     <figcaption> 
      <h2> <p>2013 Product test test test</p> </h2> 
     </figcaption> </a> 
   </figure> 
  </center>  
 </body>
</html>

Related Tutorials