<!DOCTYPE html> <html> <head> <style> .meme_container { position: relative; } .meme_container img { z-index: 1; } .meme_container .top_meme { position: absolute; top: 0; left: 0; z-index: 2; } .meme_container .bottom_meme { position: absolute; bottom: 0; left: 0; z-index: 2; } </style> </head> <body> <div class="meme_container"> <img src="http://i.imgflip.com/1bij.jpg" /> <p class="top_meme">This is a caption 1</p> <p class="bottom_meme">This is a caption 2</p> </div> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter