JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="sidebar">
  <aside id="simple_ga_rankig-2" class="widget widget_simple_ga_ranking">
    <h3 class="widget_title sidebar_widget_title">週間人気記事ランキング</h3>
    <ol class="sga-ranking">
      <li class="sga-ranking-list sga-ranking-list-1">
        <div class='ranking-img'>
          <a href="#" title="○○○">
            <img src="https://wp-simplicity.com/wp-content/uploads/2016/12/TEX1SW9IZW.jpg" alt="○○○" title="○○○">
          </a>
        </div>
        <a href="#" class="sga-simplicity-merge" title="○○○">○○○</a>
      </li>
      <li class="sga-ranking-list sga-ranking-list-1">
        <div class='ranking-img'>
          <a href="#" title="○○○">
            <img src="https://wp-simplicity.com/wp-content/uploads/2016/12/TEX1SW9IZW.jpg" alt="○○○" title="○○○">
          </a>
        </div>
        <a href="#" class="sga-simplicity-merge" title="○○○">○○○</a>
      </li>
    </ol>
  </aside>
</div>

CSS

#sidebar {
  width: 300px;
}

.sga-ranking {
  margin: 0;
  padding: 0;
}

.sga-ranking li {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0 0 56.25%;
  list-style: none;
  border: 1px solid;
  overflow: hidden;
  margin-bottom: 10px;
}

.sga-ranking li > * {
  visibility: hidden;
}

.sga-ranking li.show > * {
  visibility: visible;
}

.ranking-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.ranking-img a {
  display: block;
  width: 100%;
  height: 100%;
}

.sga-simplicity-merge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  color: #fff;
  background-color: rgba(0, 0, 0, .8);
  width: 90%;
  text-align: center;
}

JavaScript

(function($) {
  $(function() {
    var rank = $(".widget_simple_ga_ranking");
    rank.find("ol li").each(function() {
      var
        img = $(this).find(".ranking-img img"),
        imgSrc = img.attr("src");
      $(".ranking-img", this).css("background-image", "url(" + imgSrc + ")");
      img.remove();
      $(this).addClass("show");
    });
  });
})(jQuery);