250x250 "image" overlays

[shipping]

Hey all! I've made a handful of "image overlays" that are actually background overlays for pictures or gifs that are 250x250px. You don't need to have a 250x250 picture, your picture will resize to cover or fit the container in its existing scale. All you have to do to use them is copy them and then replace IMGURL (or for the ship one, IMGURL1 and IMGURL2 with your image urls! Just in case you thought your images were a little boring and needed a little spice!

navigation

BUBBLE INSTAGRAM POLAROID SUNNY SYNTHWAVE

▲
top

bubble
I picked a light and dark gif as examples to demonstrate how it would look depending on which pic you decide to use!

<div style="margin: 20px; width: 250px"><div style="box-shadow: inset 0px -10px 15px -10px rgba(222,245,249,0.6), 0px 15px 10px -10px rgba(0,0,0,0.4); height: 250px; width: 250px; background: radial-gradient(circle, transparent 0%, transparent 35%, rgba(71,81,89,0.3) 65%, rgba(71,81,89,0.3) 75%, transparent 85%), url(IMAGEURL) center center; background-size: cover; border-radius: 50%"><div style="background-blend-mode: overlay; mix-blend-mode: overlay; margin: auto; margin-top: 0px; width: 60%; height: 30%; border-radius: 50%; background: linear-gradient(0deg, rgba(255,255,255,0.6), transparent)"></div></div><div style="text-align: right; font-size: 10px; font-family: arial narrow;">coded by <a href="http://shipping.dreamwidth.org">shipping</a></div></div>

instagram

<div style="margin: 20px; width: 250px"><div style="border-radius: 25px; padding: 10px; width: 250px; height: 250px; background: linear-gradient(45deg, orange, red, purple); box-shadow: 0px 15px 10px -10px rgba(255,0,0,0.5)"><div style="background: url(IMAGEURL) center center; background-size: cover; width: 100%; height: 100%; border-radius: 20px"></div></div><div style="text-align: right; font-size: 10px; font-family: arial narrow;">coded by <a href="http://shipping.dreamwidth.org">shipping</a></div></div>

polaroid pair

<div style="max-width: 600px;"><div style="display: flex; justify-content: center; column-gap: 5px; flex-wrap: wrap; row-gap: 5px; margin: 0 0px;"><div style="margin: 5em 0em; transform: rotate(10deg); box-shadow: 0 0 2px rgba(0,0,0,0.4); background: #fff; height: 250px; width: 250px; padding: 10px; padding-bottom: 40px"><div style="height: 100%; width: 100%; background: url(IMAGEURL1) center center; background-size: cover"></div></div><div style="margin: 5em 0em; transform: rotate(-10deg); box-shadow: 0 0 2px rgba(0,0,0,0.4); background: #fff; height: 250px; width: 250px; padding: 10px; padding-bottom: 40px"><div style="height: 100%; width: 100%; background: url(IMAGEURL2) center center; background-size: cover"></div></div></div><div style="text-align: right; font-size: 10px; font-family: arial narrow;">coded by <a href="http://shipping.dreamwidth.org">shipping</a></div></div>

sunny

<div style="width: 250px; margin: 20px;"><div style="height: 250px; width: 250px; border-radius: 50px 0px; background: url(IMAGEURL) center center; background-size: cover; box-shadow: inset 0 0 2em rgba(255,255,0,0.5), 0 0 2em rgba(255,255,0,0.5);"></div><div style="text-align: right; font-size: 10px; font-family: arial narrow;">coded by <a href="http://shipping.dreamwidth.org">shipping</a></div></div>

synthwave

<div style="width: 250px; margin: 20px;"><div style="border-radius: 25px; padding: 10px; width: 250px; height: 250px; background: repeating-linear-gradient(transparent 0, rgba(0,0,0,0.1) 4px, transparent 2px), linear-gradient(45deg, magenta, cyan); box-shadow: 0px 15px 10px -10px rgba(255,0,0,0.5); box-shadow: inset 0 0 2em rgba(255,255,0,0.5), 0.5em 0.5em 1em rgba(255,150,255,0.5), -0.5em -0.5em 1em rgba(150,255,255,0.5);"><div style="box-shadow: inset 0 0 2em rgba(255,200,0,0.5), 0 0 2em rgba(0,255,0,0.5), 0px 0px 5px #fff; background-blend-mode: multiply; mix-blend-mode: overlay; background: repeating-linear-gradient(transparent 0, rgba(0,0,0,0.1) 4px, transparent 2px), url(IMAGEURL) center center; background-size: cover; width: 100%; height: 100%; border-radius: 20px; "></div></div><div style="text-align: right; font-size: 10px; font-family: arial narrow;">coded by <a href="http://shipping.dreamwidth.org">shipping</a></div></div>

I hope you guys enjoyed!

NOTES:

Please do not remove the credit signature unless you have code credits elsewhere on your journal.