SOURCE

<div class="gallery-icon">
   <a href="http://cyanflower.com/wp-content/uploads/2019/04/26d59bdd6cf4cec.jpg"><img width="300" height="300" src="http://cyanflower.com/wp-content/uploads/2019/04/26d59bdd6cf4cec-300x300.jpg" class="attachment-medium size-medium gallery-image" alt="" srcset="http://cyanflower.com/wp-content/uploads/2019/04/26d59bdd6cf4cec-300x300.jpg 300w, http://cyanflower.com/wp-content/uploads/2019/04/26d59bdd6cf4cec.jpg 600w" sizes="(max-width: 300px) 100vw, 300px"></a>
</div>

/* effect inner-shadow */
.gallery-icon {
  position: relative;
  /* 这个可不复制 */
  width: 300px;
}

.gallery-icon:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
}

.gallery-icon:hover:after {
  box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.9);
  transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
}

/* 这个不用复制 */
img {
  vertical-align: middle;
}