SOURCE

const img = document.querySelector('img');
img.onclick = () => alert('click!');

<div class='img'>
  <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D142%2C0%2C1635%2C1079%3Bc0%3Dbaike180%2C5%2C5%2C180%2C60/sign=eb9d58faf9deb48fef26fb9ecd2e0e1b/a08b87d6277f9e2f116fdf931530e924b999f3d7.jpg" alt="" />
</div>

img {
  width: 100%;
}

.img {
  position: relative;
  width: 300px;
  overflow: hidden;
  cursor: pointer;
}

.img:hover:before {
  opacity: 0.4;
}


.img:hover:after {
  bottom: 0;
}

.img:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}

.img:after {
  content: '↓';
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: white;
  top: 0; left: 0; right: 0; bottom: 999px;
  margin: auto;
  border-radius: 50%;
  transition: bottom 1s;
  pointer-events: none;
  box-shadow: 0px 0px 10px;
}