JSFiddle - React, Tailwind, and code Playground

HTML

<div id="the-content">
  <div class="hover-image">
    <img class="addCenter aligncenter wp-image-10648 size-thumbnail" src="https://3kabouzu.com/wp-content/uploads/2016/11/490898-150x150.png" alt="イラストの遺影写真" srcset="https://3kabouzu.com/wp-content/uploads/2016/11/490898-150x150.png 150w, https://3kabouzu.com/wp-content/uploads/2016/11/490898-100x100.png 100w"
    sizes="(max-width: 150px) 100vw, 150px" width="150" height="150">
    <div class="details"><span class="info">イラストの遺影写真</span></div>
  </div>
</div>

CSS

.hi--center {
  left: 50%;
  transform: translate(-50%);
}

.hover-image {
    display: inline-block;
    margin: 16px 0;
    text-align: left;
    opacity: .99;
    overflow: hidden;
    position: relative;
    border-radius: 3px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
}

JavaScript

(function($) {
  $(function() {
		var imgs = $("#the-content").find(".addCenter");
    
    imgs.each(function(){
    	if ($(this).parent(".hover-image").length) {
      	$(this).parent(".hover-image").addClass("hi--center");
      }
    });
    
  });
})(jQuery);