Examples

by Ishank Dubey

HTML

<div>
<img id='container' src='' alt=''>
<div id='text-slider'>
<a href="#" class="previous round">&#8249;</a>
<a href="#" class="next round">&#8250;</a>

Test Image Text

</div>
</div>

<button id='animate'>animate</button>

CSS

#text-slider{
  background-color:rgba(0,0,0,0.8);
  position:absolute;
  z-index:11;
  bottom:0;
  padding:0;
  margin:0;
  width:100%;
  text-align:center;
  margin-bottom:2px;
  height:auto;
  padding: 1% 1%;
}

div{
  position:relative;
  width:100%;
  color:white;
  }
img {
  transition: opacity 5.25s ease-in; 
}

.go {
  opacity: 0.5;
}

.come {
  opacity: 1;
}

#container {
  width:100%;
  height:100%;
}

img {
  width:100%;
  height:auto;
}
a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 8px;
  font-size:15px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%;
}

JavaScript

let element = document.getElementById('container');
document.getElementById('animate').onclick = function (e){
element.classList.add("go");
//document.getElementById('container').classList.remove("test");
};



// Code for Chrome, Safari and Opera
element.addEventListener("webkitTransitionEnd", function(e){
console.log('done',e);
element.classList.toggle("go");
element.classList.toggle("come");
});
let imageArray = ['https://s3-us-west-1.amazonaws.com/sfdc-demo/realty/house08.jpg'];
let point = 0;
document.getElementById('container').setAttribute("src",imageArray[point]);


//document.getElementById("myDIV").addEventListener("transitionend", myFunction);