DENERIK,
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
document.addEventListener('DOMContentLoaded', function () {
var imgs = document.getElementsByTagName('img');
for(var i=0;i<imgs.length; i++){
if(window.getComputedStyle(imgs[i]).opacity < 1){
var nImg = document.createElement('img');
imgs[i].parentNode.replaceChild(nImg,imgs[i]);
imgs[i].parentNode.classList.add('a1');
}
}
});
</script>
<style>
div {
width: 600px;
}
img {
width: 100%;
}
#img1 {
opacity: 0.6;
width: 100%;
}
#img2 {
opacity: 0.3;
width: 100%;
}
#img3 {
opacity: 0.5;
width: 100%;
}
#img4 {
width: 100%;
}
.a1 {
width: 100px;
height: 100px;
background: black;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img1" > </div>
<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img2" ></div>
<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img3" ></div>
<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img4" ></div>
</body>
</html>