CSS Property Value How to - z-index: 10; Bring overlapping border to front when hovered








Question

We would like to know how to z-index: 10; Bring overlapping border to front when hovered.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.container img {<!--from w  w  w. java 2  s .  c om-->
  position: absolute;
  border: solid 1px black;
}

.container img.a {
  left: 0;
}

.container img.b {
  left: 90px;
}

.container img.c {
  left: 180px;
}

.container img.d {
  left: 270px;
}

.container img.e {
  left: 360px;
}

.container img.f {
  left: 450px;
}

.container img:hover {
  z-index: 10;
}
</style>
</head>
<body>
  <div class="container">
    <img class="a" src="http://placehold.it/100x100" /> 
    <img class="b" src="http://placehold.it/100x100" /> 
    <img class="c" src="http://placehold.it/100x100" /> 
    <img class="d" src="http://placehold.it/100x100" /> 
    <img class="e" src="http://placehold.it/100x100" /> 
    <img class="f" src="http://placehold.it/100x100" />
  </div>
</body>
</html>

The code above is rendered as follows: