Effect How to - Hover on image to change border

Question

We would like to know how to hover on image to change border.

Answer


<html>
  <style type="text/css">
    .section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style><!--from w  w w .j  a  v  a 2  s.c o m-->
</head>
<body>
  <div class="section">
    <img src="http://www.java2s.com/style/download.png" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>

The code above is rendered as follows: