Blog Trick + Free Comic Book Day 2019 (Avengers-Savage Avengers)

Just enhancing my Coding skills using CSS style "onclick" hiding multiple images. Anyway, here's an example of it. Code below if you need to get it. Also, to those who love comics, here is the Savage Avenger from Marvel Comics-

Click the Image To see the Comics
You may click the same First image to hide it.

alright here's the Code below -

<style>

img          { border: 1px solid #808080; padding: 2px }

summary {  display: inline-flex; width:480px; height:480px }

details[open] img {  width: 480px;  height: 640px; }

</style>

Add this code in your HTML editor of the Blog, either on a post or gadget (I preferred putting on your new blog post), wherever you like. More tutorials on adding HTML code will be posted soon.

After you upload the image be sure to put it in actual or Original size since you are about to resize it. It will be pixelated if you put it on low resolution.

Just before and after the "img" code, you need to add a <details> summary to hide the rest. Of course, all images must have a summary. see the example below -

<details>

    <summary><img border="0" src="YOUR IMAGE.JPG 1 or WHATEVER picture you uploaded" /></summary><br />

    <summary><img border="0" src="YOUR IMAGE.JPG 2 or WHATEVER picture you uploaded" /></summary><br />

    <summary><img border="0" src="YOUR IMAGE.JPG 3 or WHATEVER picture you uploaded" /></summary><br />

</details>

Note: Also, Sometimes Blogger will automatically add  (open="") inside the details tag when you make an attempt to edit in compose view. Be sure to check and delete it, or else it won't work.

And you're done. Thank you and have a nice day.

- Jerry N. Bustillo