JSFiddle - React, Tailwind, and code Playground

HTML

Use case: a text where some word will show an image on the right. This should be dynamic and we should be able to specify the image inline so we can easily manage this.

<div class="contaienr">
<h1>A title here </h1>
<p>Lorem ipsum dolor sit amet, <span style="--i:url(https://picsum.photos/id/1069/800/800)">consectetur</span> adipiscing elit. Pellentesque quis nunc neque. Aliquam sit amet leo id orci efficitur consectetur eu nec ex. Nam eget vehicula neque. <span style="--i:url(https://picsum.photos/id/101/800/800)">Vestibulum</span> ipsum purus, ornare id tellus vel, <span style="--i:url(https://picsum.photos/id/1018/800/800)">pellentesque</span> porta tortor. Pellentesque nec faucibus lacus. Aliquam sit amet aliquam est, u</p>
</div>

CSS

.contaienr {
  padding-right:200px;
  border:2px solid;
  font-size:25px;
  position:relative;
  margin:5px;
}
span {
  background:rgba(0,0,0,0.2);
  cursor:pointer;
}
span::before {
  content:"";
  position:absolute;
  opacity:0;
  top:0;
  bottom:0;
  right:0;
  width:200px;
  background:var(--i) center/cover no-repeat;
  transition:0.3s;
}
span:hover::before {
  opacity:1;
}