Эффект при наведении на картинку (CSS)

*, 
*:before, 
*:after{ 
  box-sizing:border-box; 
} 
.img-link{ 
  display:block; 
  width:200px; 
  height:200px;   
  border:7px solid #fff; 
  box-shadow:0 0 1px 1px gray; 
  border-radius:50%; 
  background:linear-gradient(145deg,#4a35c5,#ba13c5); 
  position:relative; 
  color:transparent; 
  transition:all .5s ease; 
} 
.img-link:before{ 
  content:'\f0c1'; 
  font-family:fontAwesome; 
  font-size:40px; 
  line-height:1; 
  position:absolute; 
  top:calc(50% - .5em); 
  left:calc(50% - .5em); 
  z-index:2; 
} 
.img-link img{ 
  display:block; 
  width:100%; 
  height:100%; 
  border-radius:inherit; 
  object-fit:cover; 
  object-position:center; 
  transition:inherit; 
} 
.img-link:hover{ 
  color:#fff; 
} 
.img-link:hover img{ 
  opacity:.4; 
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
<a href="#" class="img-link"> 
  <img src="https://s1.gifyu.com/images/rbt-spa-massage-hand-foot-reflex-410-a.jpg" alt=""/> 
</a>

.wrapper { 
  position: relative; 
} 
 
.hoverEffect { 
  position: absolute; 
  opacity: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #fff; 
  font-size: 24px; 
  transition: opacity  1s ease-in-out; 
  top: 0; 
  left: 0; 
  margin: 6px; 
  background-color: 	rgba(128,0,128, 0.6); 
 
} 
 
.wrapper img { 
  border: 1px solid #a0522d; 
  padding: 5px; 
} 
.wrapper , .wrapper img , .hoverEffect { 
  border-radius: 100%; 
  height: 175px; 
  width: 175px; 
} 
 
.wrapper:hover .hoverEffect { 
  opacity: 1; 
}

<div class='wrapper'> 
    <img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" alt="image"> 
    <div class='hoverEffect'> 
      Icon<!--  тут вставить icon --> 
    </div> 
</div>