JSFiddle - React, Tailwind, and code Playground

by Przemek Misztal

HTML

<div id="p83">
  <img src="http://przemoo83.esy.es/img/sm-mini.png" alt="" />
  <img src="http://przemoo83.esy.es/img/sm-small.png" alt="" />
  <img src="http://przemoo83.esy.es/img/sm-mini.png" alt="" />
</div>
<div id="someDiv">
  <img src="http://przemoo83.esy.es/img/sm-mini.png" alt="" />
  <img src="http://przemoo83.esy.es/img/sm-small.png" alt="" />
</div>

CSS

#p83 img {
    max-width:100% !important;
    height:auto;
    display:block;
}

figcaption{
  display: block;
}
figure {
  margin: 10px 0 60px 0;
  position: relative;
  display: block;
}

figure:hover img {
opacity: 0.5;
transition: 1s;
}

JavaScript

(function() {
  function P83ImageFixer(container, options) {
    this.container = container;
    this.options = options;
    this.container = document.querySelector(container);
    this.images = this.container.querySelectorAll('img');
    this.fixImg();
    this.adjustFigure(); 
  }
  P83ImageFixer.prototype.fixImg = function() {
		for(var i = 0; i < this.images.length; i++){
    	this.images[i].className = 'p83-image';
     	this.addFigure(i);
    }
     
  }
  P83ImageFixer.prototype.addFigure = function(int){
  	var parent = this.images[int].parentNode;
    var figure = document.createElement('figure');
    var figcaption = document.createElement('figcaption');
    parent.replaceChild(figure, this.images[int]);
    figure.appendChild(this.images[int]);
    var caption = this.images[int].parentNode.insertBefore(figcaption, this.images[int].nextSibling);
    caption.innerHTML = this.options.figcaption[int];
  }
	P83ImageFixer.prototype.adjustFigure = function(){
   	var figures = this.container.querySelectorAll('figure');
  	for(var i = 0; i < this.images.length; i++){
    	var width = this.images[i].clientWidth;
			var height = this.images[i].clientHeight;
        figures[i].style.width = width +'px';
        figures[i].style.height = height + 'px';
        figures[i].style.backgroundColor = this.options.shadowColor;
    }
  }
  var shader1 = new P83ImageFixer('#p83', {
  figcaption: ['opis 1', 'opis 2', 'opis 3'],
  shadowColor: 'red'
  });
  
  var shader2 = new P83ImageFixer('#someDiv', {
  figcaption: ['opis 4', 'opis 5'],
  shadowColor: 'green'
  });
})();