<div class="row">
<div class="steps">
<h2>Installation</h2>
<ol>
<li data-figure-img="http://thantienvxp.xtgem.com/images/lam-web/thistle.jpg">
Các bề mặt trục được chuẩn bị bằng cách làm sạch sơn dầu và ăn mòn, với cải tạo chân không HEPA.
</li>
<li data-figure-img="http://thantienvxp.xtgem.com/images/lam-web/html.png">
Máy phát điện không dây kết nối với một nguồn điện cố định được cài đặt trên các trục.
</li>
<li data-figure-img="http://thantienvxp.xtgem.com/images/lam-web/html_css.jpg">
Một máy tính hiển thị được đặt gần đó. Kỹ sư có thể truy cập dữ liệu và kiểm soát chức năng từ xa từ vị trí này
.</li>
</ol>
</div>
<figure id="steps-figure">
</figure>
</div>

div.steps:hover + figure {
background-image: url("http://placehold.it/350x150");
}

figure {
float: right;
width: 350px;
height: 150px;
}

figure {
width: 200px;
height: 200px;
background-position: center;
background-size: cover;
border: 1px solid red;
}

var figureImgs = document.querySelectorAll('.steps li');
var figureImg = document.getElementById('steps-figure');
for (var i = 0; i < figureImgs.length; ++i) {
figureImgs[i].addEventListener('mouseenter', function() {
var img = this.getAttribute('data-figure-img');
figureImg.style.backgroundImage = "url(" + img + ")";
}, false);
}