Hover эффект для изображений

.parent { 
  display: flex; 
  flex-wrap: wrap; 
  width: 360px; 
} 
 
.parent-child { 
  display: block; 
  position: relative; 
  width: 100px; 
  height: 100px; 
  margin: 5px; 
  background-color: #eee; 
  overflow: hidden; 
} 
 
.parent-child-image { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-image: url(https://www.gravatar.com/avatar/370ca5f8dbccb9352ae29c89dddfff0e?s=100&d=identicon&r=PG); 
  transition: all 0.5s; 
  filter: blur(0px); 
} 
.parent-child:hover .parent-child-image {filter: blur(3px);} 
 
.parent-child-block { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(255,255,255,0.6); 
  opacity: 0; 
  transition: all 0.5s; 
} 
.parent-child:hover .parent-child-block {opacity: 1}

<div class="parent"> 
  <div class="parent-child"> 
    <div class="parent-child-image"></div> 
    <div class="parent-child-block">Тут стрелки</div> 
  </div> 
  <div class="parent-child"> 
    <div class="parent-child-image"></div> 
    <div class="parent-child-block">Тут стрелки</div> 
  </div> 
  <div class="parent-child"> 
    <div class="parent-child-image"></div> 
    <div class="parent-child-block">Тут стрелки</div> 
  </div> 
  <div class="parent-child"> 
    <div class="parent-child-image"></div> 
    <div class="parent-child-block">Тут стрелки</div> 
  </div> 
  <div class="parent-child"> 
    <div class="parent-child-image"></div> 
    <div class="parent-child-block">Тут стрелки</div> 
  </div> 
  <div class="parent-child"> 
    <div class="parent-child-image"></div> 
    <div class="parent-child-block">Тут стрелки</div> 
  </div> 
  <div class="parent-child"> 
    <div class="parent-child-image"></div> 
    <div class="parent-child-block">Тут стрелки</div> 
  </div> 
  <div class="parent-child"> 
    <div class="parent-child-image"></div> 
    <div class="parent-child-block">Тут стрелки</div> 
  </div> 
  <div class="parent-child"> 
    <div class="parent-child-image"></div> 
    <div class="parent-child-block">Тут стрелки</div> 
  </div> 
</div>

.b-pict { 
  display: inline-block; 
  position: relative; 
  overflow: hidden; 
  line-height: 0; 
} 
 
.b-pict>img { 
  transition: .3s; 
} 
 
.b-pict:hover>img { 
  filter: blur(5px); 
} 
 
.b-pict-arrow { 
  opacity: 0; 
  transition: .3s; 
  position: absolute; 
} 
 
.b-pict-arrow:after { 
  content: ''; 
  position: absolute; 
  width: 0; 
  height: 0; 
  border-style: solid; 
} 
 
.b-pict-arrow-top, 
.b-pict-arrow-bottom { 
  left: 50%; 
  margin-left: -4px; 
  width: 8px; 
  height: 20px; 
  background: #555; 
} 
 
.b-pict-arrow-top { 
  top: 25%; 
} 
 
.b-pict-arrow-bottom { 
  bottom: 25%; 
} 
 
.b-pict-arrow-top:after, 
.b-pict-arrow-bottom:after { 
  left: 50%; 
  margin-left: -10px; 
} 
 
.b-pict-arrow-top:after { 
  bottom: 100%; 
  border-width: 0 10px 20px 10px; 
  border-color: transparent transparent #555 transparent; 
} 
 
.b-pict-arrow-bottom:after { 
  top: 100%; 
  border-width: 20px 10px 0 10px; 
  border-color: #555 transparent transparent transparent; 
} 
 
.b-pict-arrow-left, 
.b-pict-arrow-right { 
  top: 50%; 
  margin-top: -4px; 
  width: 20px; 
  height: 8px; 
  background: #555; 
} 
 
.b-pict-arrow-left { 
  left: 25%; 
} 
 
.b-pict-arrow-right { 
  right: 25%; 
} 
 
.b-pict-arrow-left:after, 
.b-pict-arrow-right:after { 
  top: 50%; 
} 
 
.b-pict-arrow-left:after { 
  right: 100%; 
  margin-top: -10px; 
  border-width: 10px 20px 10px 0; 
  border-color: transparent #555 transparent transparent; 
} 
 
.b-pict-arrow-right:after { 
  left: 100%; 
  margin-top: -10px; 
  border-width: 10px 0 10px 20px; 
  border-color: transparent transparent transparent #555; 
} 
 
.b-pict:hover .b-pict-arrow { 
  opacity: 1; 
}

<div class="b-pict"> 
  <img src="http://placehold.it/150x150"> 
  <span class="b-pict-arrow b-pict-arrow-top"></span> 
  <span class="b-pict-arrow b-pict-arrow-bottom"></span> 
  <span class="b-pict-arrow b-pict-arrow-left"></span> 
  <span class="b-pict-arrow b-pict-arrow-right"></span> 
</div>