JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<ul class="container">
<li class="listItem">

<span class="headerBg"></span>
<span class="headline subheader">Heading</span>
<p class="date">4/8/2020</p>
<a class="wkLink linkbuttons">Read More</a>
<div class="eaWkArticle">
<div>
<div>
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="wp-post-image" />
</div>
</div>
</div>

</li>
<li class="listItem">

<span class="headerBg"></span>
<span class="headline subheader">Heading</span>
<p class="date">4/9/2020</p>
<a class="wkLink linkbuttons">Read More</a>
<div class="eaWkArticle">
<div>
<div>
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="wp-post-image" />
</div>
</div>
</div>

</li>
<li class="listItem">

<span class="headerBg"></span>
<span class="headline subheader">Heading</span>
<p class="date">4/10/2020</p>
<a class="wkLink linkbuttons">Read More</a>
<div class="eaWkArticle">
<div>
<div>
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="wp-post-image" />
</div>
</div>
</div>

</li>
</ul>

CSS

.eaWkArticle { display:none; }
.headerBg { display:block; width:100px; height:100px; }

JavaScript

$('img.wp-post-image').each(function(i, item) {
  var xx = $(item).attr('src');
  $(item).closest('li.listItem').find('.headerBg').css({
    'background': 'url(' + xx + ') no-repeat center',
    '-webkit-background-size': 'cover',
    '-moz-background-size': 'cover',
    '-o-background-size': 'cover',
    'background-size': 'cover'
  });
});