How to put text in the image in 5 seconds in blogger post

Back>
You can put text inside html images in a blogger post.

Example

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link>


<br />
<div class="w3-container">
<h2>
Way of thinking</h2>
<p>
Datastructures are tools, they are only useful in the magic hands:
</p>
<br />
<div class="w3-display-container w3-text-white">
<img alt="Lights" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6vWD1RiNcxyenJJsKNfIjKUugok28P4YG4DUaYYtJxIsktZU6Ghk9QPTalDYFZCih-mHcuAdUGW3wxsiDtM-8z2fExVtpG8QhCB3caM2kZnrH9T7XC27EbJ4X_fksv402kiq7rHCKMZnS/s320/portal.png" style="width: 100%;"/>
    <br />
<div class="w3-display-topleft w3-container">
Binary Search</div>
<div class="w3-display-topright w3-container">
Recursive</div>
<div class="w3-display-bottomleft w3-container">
KMP/Boyer-Moore/Rabin-Karp</div>
<div class="w3-display-bottomright w3-container">
Merge Sort</div>
<div class="w3-display-left w3-container">
BFS/DFS</div>
<div class="w3-display-right w3-container">
Loop</div>
<div class="w3-display-middle w3-large">
Dynamic Programming</div>
<div class="w3-display-topmiddle w3-container">
Quick Sort</div>
<div class="w3-display-bottommiddle w3-container">
Greedy</div>
</div>
</div>