Как сделать такой hover [дубликат]

.block { 
  position: relative; 
  padding: 5px; 
  display: inline-block; 
  background-color: #fff; 
} 
 
.block:hover { 
  background-color: #B7E522; 
} 
 
.block:before { 
  content: ""; 
  width: 90%; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: 5%; 
  background-color: #fff; 
} 
 
.block:after { 
  content: ""; 
  width: 100%; 
  height: 90%; 
  position: absolute; 
  top: 5%; 
  left: 0; 
  background-color: #fff; 
} 
 
.block>img { 
  position: relative; 
  max-width: 100%; 
  height: auto; 
  z-index: 999; 
}

<div class="block"> 
  <img src="https://t4.ftcdn.net/jpg/01/85/66/43/500_F_185664319_kxK75qclPnH3trVYEf7wnid2VUmYaHYB.jpg"> 
</div>

.caption.x1{ 
  margin:0; 
  padding:0; 
  width:60%; 
  margin:20px auto; 
  position: relative; 
} 
.caption.x2{ 
  margin:0; 
  padding:0; 
  width:70%; 
  margin:20px auto; 
  position: relative; 
} 
.caption img{ 
  display:block; 
  width:100%; 
} 
.tbil{ 
  border-left:5px solid red; 
  border-top:5px solid red; 
  position: absolute; 
  top:-5px; left:-5px; 
} 
.tbir{ 
  border-right:5px solid red; 
  border-top:5px solid red; 
  position: absolute; 
  top:-5px; right:-5px; 
} 
 
.bbil{ 
  border-left:5px solid red; 
  border-bottom:5px solid red; 
  position: absolute; 
  bottom:-5px; left:-5px; 
} 
.bbir{ 
  border-right:5px solid red; 
  border-bottom:5px solid red; 
  position: absolute; 
  bottom:-5px; right:-5px; 
} 
.border{ 
  width:20%; 
  height:30%; 
  opacity:0; 
  transition:all .4s linear; 
} 
.caption:hover .border{ 
  opacity:1; 
}

<div class="caption x1"> 
  <div class="tbil border"></div> 
  <div class="tbir border"></div> 
  <img src="http://fb.ru/misc/i/gallery/14907/269817.jpg" alt=""> 
  <div class="bbil border"></div> 
  <div class="bbir border"></div> 
</div> 
 
<div class="caption x2"> 
  <div class="tbil border"></div> 
  <div class="tbir border"></div> 
  <img src="http://kino-kingdom.com/uploads/posts/2017-10/1507789838_maxresdefault.jpg" alt=""> 
  <div class="bbil border"></div> 
  <div class="bbir border"></div> 
</div>

.main img { 
  border: 3px solid transparent; 
} 
 
.main img:hover { 
  border: 3px solid #40c4c8; 
  border-image: url(https://i.stack.imgur.com/QBuDC.png) 3; 
}

<div class="main" id="maincontent"> 
  <img alt="stegosaurus" src="https://i.stack.imgur.com/tCMsF.jpg"> 
</div>