[73] Scaled Images Nav

[lina_trinch]

Code:
<div style="width: 450px; margin: auto; display: flex; flex-direction: row; flex-wrap: wrap;"> <a href="URL" class="customFlexLink" style="width: 150px; height: 150px; background: center/cover url('IMAGE_URL'), #bbb;"></a> <a href="URL" class="customFlexLink" style="width: 150px; height: 150px; background: center/cover url('IMAGE_URL'), #ccc;"></a> <a href="URL" class="customFlexLink" style="width: 150px; height: 150px; background: center/cover url('IMAGE_URL'), #ddd;"></a> <a href="URL" class="customFlexLink" style="width: 150px; height: 150px; background: center/cover url('IMAGE_URL'), #aaa;"></a> <a href="URL" class="customFlexLink" style="width: 150px; height: 150px; background: center/cover url('IMAGE_URL'), #bbb;"></a> <a href="URL" class="customFlexLink" style="width: 150px; height: 150px; background: center/cover url('IMAGE_URL'), #ccc;"></a> <a href="URL" class="customFlexLink" style="width: 150px; height: 150px; background: center/cover url('IMAGE_URL'), #ddd;"></a> <a href="URL" class="customFlexLink" style="width: 150px; height: 150px; background: center/cover url('IMAGE_URL'), #aaa;"></a> <a href="URL" class="customFlexLink" style="width: 150px; height: 150px; background: center/cover url('IMAGE_URL'), #bbb;"></a> <!--ADD MORE ABOVE THIS LINE--> </div> <div style="width: 450px; text-align: center; margin: 10px auto; font-size: 8px; font-family: monospace; font-weight: bold; letter-spacing: 2px;"> <a href="https://killthecake.dreamwidth.org/" style="color: #000; text-decoration: none;"> CODE </a> </div>

CSS Code for Fancy Effects:
.customFlexLink { transform: scale(50%); transition: all 0.2s; } .customFlexLink:hover { transform: scale(100%); }

❖ These codes were released early on the Patreon! Feel free to check out things over there if you want early codes or some exclusive content. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ This code recommends that you go the extra step of inputting the CSS (the second text box of code) into the bottom of your journal layout's CSS. It won't mess with your layout, don't worry, but it'll add the cool effect on your journal (but not in the entry itself). ❖ If you don't do the extra step, no problem! Your code will just look like this on all pages, including your journal. Ctrl+F & Replace: ❖ IMAGE_URL - GIF or image URL placeholder. ❖ URL - Link URLs. There is no text in this code. #aaa #bbb #ccc #ddd The different block colors, so that you can tell them apart if you don't use the CSS.