image border on hover

by Vivek Athalye

HTML

<div class="parent">
  <div class="bgImg">
  contains image
  </div>
  <div class="imgBorder">
  
  </div>
</div>
<div class="parent">
  <div class="bgImg">
  contains image
  </div>
  <div class="imgBorder">
  
  </div>
</div>
<div class="parent">
  <div class="bgImg">
  contains image
  </div>
  <div class="imgBorder">
  
  </div>
</div>

CSS

.parent{
  width:300px;
  height:200px;
  border: 3px solid transparent;
  position: relative;
  margin:10px;
}
.bgImg {
  border: 0px dashed white;
  background-image: url("http://dreamlovewallpapers.com/wp-content/uploads/2015/07/Animal-Dog-And-Kitten-Playing-Together-Wallpaper-300x200.jpg");
  position: absolute;
  width:100%;
  height: 100%;
  display: inline;
}
.imgBorder {
  border: 0px dashed red;
  position: absolute;
  width:98%;
  height: 98%;
  display: inline;
}
.imgBorder:hover {
  border: 3px solid red;
}