Demo:Click here
Code:Post Card Title HTML and CSS for Blogger (Copy and Paste to post ot page)
<style>
.image-gallery{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-wrap:wrap}.image-td{margin-bottom:3px;background:#C3BFF5;border-radius:3px;display:inline-block;animation:scaler 1s ease-out 1 alternate}.image-tdInner{padding:0;text-align:center;background:transparent}.image-tdInner img{width:100%}@keyframes scaler{0%{transform:scale(0)}100%{transform:scale(1)}}@media only screen and (max-width : 600px){.image-td{margin:2px 0;width:100%}}@media only screen and (min-width : 601px)and (max-width : 900px){.image-td{margin:5px;width:calc(50% - 10px)}}@media only screen and (min-width: 900px){.image-td{margin:5px;width:calc(25% - 10px)}}.image-td .image-tdInner:hover{transform:scale(1.05);animation:hoverAnimOP 0.5s linear 1 alternate}@keyframes hoverAnimOP{0%{transform:scale(1)}100%{transform:scale(1.05)}}
</style>
<div class="image-gallery">
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.1I">
<img src="https://chem.libretexts.org/@api/deki/files/78704/mindtouch.page%2523thumbnail?revision=2" />
</a>
<a href="/search/label/GC.1I">1. Introduction: Matter, Energy, and Measurement
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.2I">
<img src="https://chem.libretexts.org/@api/deki/files/78705/mindtouch.page%2523thumbnail?revision=3" />
</a>
<a href="/search/label/GC.2I">2. Atoms, Molecules, and Ions
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.3I">
<img src="https://chem.libretexts.org/@api/deki/files/78706/mindtouch.page%2523thumbnail?revision=2" />
</a>
<a href="/search/label/GC.3I">3. Chemical Reactions and Reaction Stoichiometry
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.4I">
<img src="https://chem.libretexts.org/@api/deki/files/78707/mindtouch.page%2523thumbnail?revision=3" />
</a>
<a href="/search/label/GC.4I"> 4. Reactions in Aqueous Solution
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.5I">
<img src="https://chem.libretexts.org/@api/deki/files/78708/mindtouch.page%2523thumbnail?revision=2" />
</a>
<a href="/search/label/GC.I"> 5. Thermo - chemistry
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
<div class="image-td">
<div class="image-tdInner">
<a href="/search/label/GC.I">
<img src="" />
</a>
<a href="/search/label/GC.I">
</a>
</div>
</div>
</div>
.jpeg)
