How to change image in blogger post in 5 minutes

Back>

Example

You first need to upload the images, then click the HTML tab,
locate the image src which is something like these:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTNe6CgtNaw5TVbbvCgO3eBNOQCyfcsGrJrdnKgOAoaoutcAP-tE2mrGbD-g9y0qRGl8R7NXQqtbNCaLWfHqEDKsMt_qYDMQnB_ybdzKnoWCFBjuA0t18-oqX9lSrgWrOVojrTVCvgFI2/s1600/Screen+Shot+2017-06-15+at+2.36.17+AM.png

copy the image src and put into the following code, then paste to the blogger post's HTML tab:

<style>
.container {
    position: relative;
    width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

/*button css*/
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.choices {
  position: relative;
  overflow: left;
  padding: 16px 32px;
}
</style>

<script>
function setFunction() {
    document.getElementById('Avatar').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTNe6CgtNaw5TVbbvCgO3eBNOQCyfcsGrJrdnKgOAoaoutcAP-tE2mrGbD-g9y0qRGl8R7NXQqtbNCaLWfHqEDKsMt_qYDMQnB_ybdzKnoWCFBjuA0t18-oqX9lSrgWrOVojrTVCvgFI2/s1600/Screen+Shot+2017-06-15+at+2.36.17+AM.png';
    document.getElementById("desc").innerHTML='Set: A collection that contains no duplicate elements, this interface models the mathematical set abstraction.';
}

function listFunction() {
    document.getElementById('Avatar').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFj5-qnDxytHwMwYZSgpTa-reRxB1ZBfVWQgkBFNKyQMd6pAeHDBc9sMwyAmTF3egfxP2DQLIEZAG6Ownl21jzCCWDqQ9SVWuFr3oppLtHrAdTojVjg5vR14X_5qyQxyihDMNjYi1XgNm/s1600/Screen+Shot+2017-06-15+at+7.24.33+PM.png';
    document.getElementById("desc").innerHTML='List: An ordered collection (also known as a sequence). The user can access elements by their integer index (position in the list).';
}

function queueFunction() {
    document.getElementById('Avatar').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwkx4DZv_LpI-O8DbfXCWAjaeHZ4JV8yfvh2sdFH7UN9vdutltjZNofxfRYO4k6xUOe9O58auVp64jHtFcMF8OPpXw3GwczUhbYLzGxXO5ftqMGSPY3IZq3hruPIsv_w2fWXxcIHaLhN1f/s1600/Screen+Shot+2017-06-15+at+3.28.36+AM.png';
    document.getElementById("desc").innerHTML='Queue: A collection designed for holding elements prior to processing. Queue is typically FIFO or LIFO, edge of the queue is added/removed/inspected by calling add(e)/remove()/element() or offer(e)/poll()/peek()';
}
</script>


<div class="choices">
<button class="button" onclick="setFunction()">Set</button>
<button class="button" onclick="listFunction()">List</button>
<button class="button" onclick="queueFunction()">Queue</button>
</div>

<div class="container">
<img class="image" id="Avatar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTNe6CgtNaw5TVbbvCgO3eBNOQCyfcsGrJrdnKgOAoaoutcAP-tE2mrGbD-g9y0qRGl8R7NXQqtbNCaLWfHqEDKsMt_qYDMQnB_ybdzKnoWCFBjuA0t18-oqX9lSrgWrOVojrTVCvgFI2/s1600/Screen+Shot+2017-06-15+at+2.36.17+AM.png" style="width: 100%;" />
  <br />
<div class="middle">
<div class="text" id="desc">
Set: A collection that contains no duplicate elements, this interface models the mathematical set abstraction.</div>
</div>
</div>