/*30x30*/


.img-swap-30 {
  width:30px;
  height:30px;
  position:relative;
  margin:0 auto;
}

.img-swap-30 img {
  height:30px;
  width:30px;
}

.img-swap-30 img:nth-of-type(1) {
  position:relative;
  opacity:1;
  transition:opacity 0.5s;
}

.img-swap-30 img:nth-of-type(1):hover {
  opacity:0;
}

.img-swap-30 img:nth-of-type(2) {
  position:absolute;
  opacity:0;
  top:0;
  left:0;
  transition:opacity 0.5s;
}

.img-swap-30 img:nth-of-type(2):hover {
  opacity:1;
}




/*SMAAL*/


.img-swap {
  position:relative;
  margin:0 auto;
}

.img-swap img:nth-of-type(1) {
  position:relative;
  opacity:1;
  transition:opacity 0.5s;
}

.img-swap img:nth-of-type(1):hover {
  opacity:0;
}

.img-swap img:nth-of-type(2) {
  position:absolute;
  opacity:0;
  top:0;
  left:0;
  transition:opacity 0.5s;
}

.img-swap img:nth-of-type(2):hover {
  opacity:1;
}




/*BIIG*/



.img-swap-big {
  width:200px;
  height:200px;
  position:relative;
  margin:0 auto;
}

.img-swap-big img {
  height:200px;
  width:200px;
}

.img-swap-big img:nth-of-type(1) {
  position:relative;
  opacity:1;
  transition:opacity 0.5s;
}

.img-swap-big img:nth-of-type(1):hover {
  opacity:0;
}

.img-swap-big img:nth-of-type(2) {
  position:absolute;
  opacity:0;
  top:0;
  left:0;
  transition:opacity 0.5s;
}

.img-swap-big img:nth-of-type(2):hover {
  opacity:1;
}