Images

• The images section includes lace borders, colored borders, image styles, and image animations, both on hover and fixed. Underlined links lead to the source. You can copy the code by clicking the scrollbox.
• To hide/show images with border styles, click Hide/Show Images button below.

Hot Pink border-width:8px; border-style:solid; border-image: url("https://i.ibb.co/h1Q3bFn/83-B27704-CEA1-4-B8-F-BF79-90-D624-EDC6-F6.png") 8 fill round; Copied!

Brown border-width:8px; border-style:solid; border-image: url("https://dl.dropbox.com/s/w5yteo6huqvmzx1/brown.png") 8 fill round; Copied!

Orange border-width:8px; border-style:solid; border-image: url("https://dl.dropbox.com/s/rr5se47u373c2yn/orange%20lace.png") 8 fill round; Copied!

Purple border-width:8px; border-style:solid; border-image: url("https://dl.dropbox.com/s/l61yvavjx2e501e/image.png") 8 fill round; Copied!

Pink Paper border-width:10px; border-style:solid; border-image: url("https://img-fotki.yandex.ru/get/4602/28257045.844/0_7d5c6_2de543e9_XXXL") 35 fill round; border-radius:15px; Copied!

Blue 1 border-width:7px; border-style:solid; border-image: url("https://64.media.tumblr.com/0bf9b5b1bc56ef2bd4a443aeec3dab08/e7a46821cfe7af87-12/s250x400/d314d89c3d9fb927d552b57cf19abec1d0b29c13.png") 7 fill round; Copied!

Blue 2 border-width:7px; border-style:solid; border-image: url("https://i.imgur.com/J6qaOtb.png") 5 fill round; Copied!

Blue 3 border-width:8px; border-style:solid; border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 8 fill round; Copied!

Biscuit border-width:7px; border-style:solid; border-image: url("https://foollovers.com/mat/baf/food/fo32-008-a.gif") 7 fill round; Copied!

Flower border-width:7px; border-style:solid; border-image: url("https://foollovers.com/mat/baf/flower/fl32-005-d.gif") 7 fill round; Copied!

Beaded Hearts border-width:7px; border-style:solid; border-image: url("https://foollovers.com/mat/baf/heart/he32-012-c.gif") 7 fill round; Copied!

Doily border-width:7px; border-style:solid; border-image: url("https://foollovers.com/mat/plate/pl034-plate-i08.gif") 55 fill round; Copied!

Pink 1 border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/ROjUrNz.gif") 6 fill round; Copied!

Pink 2 border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/2jXrMdE.png") 11 fill round; Copied!

Yellow border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/3pzGJd7.png") 7 fill round; Copied!

White (c) baeyhkun border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/8xftJ3v.gif") 7 fill round; Copied!

Golden Frame border-width:10px; border-style:solid; border-image: url("https://i.ibb.co/LYSfp26/C9487459-587-E-4-EDC-89-C1-2-B2-F0804-F5-A7.png") 35 fill round; Copied!

White border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round; Copied!

Yellow & Pink Heart border-width:10px; border-style:solid; border-image: url("https://hosting.photobucket.com/albums/bb183/phyncke_graphique/Pixel-Frames/.highres/a49U000028.gif?width=450&height=278&crop=fill") 9 fill round; Copied!

Pink 3 border-width: 8px; border-style: solid; border-image: url("https://i.imgur.com/J4IhM3e.png") 7 fill round; Copied!

Pink 4 border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/8Tk8PKV.gif") 7 fill round; Copied!

Pink 5 border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/8Tk8PKV.gif") 7 fill round; Copied!

Pink 6 border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/FsgoCPW.png") 7 fill round; Copied!

Pink 7 border-width: 8px; border-style: solid; border-image: url("https://i.imgur.com/e3EPu48.png") 12 fill round; Copied!

Pink 8 (c) solielios border-width:12px; border-style:solid; border-image: url("https://i.imgur.com/gTFIwdW.png") 11 fill round; Copied!

Grey (c) solielios border-width:12px; border-style:solid; border-image: url("https://i.imgur.com/Kh6qtcn.png") 11 fill round; Copied!

Black border-style: solid; border-width: 10px; border-image: url("https://dl.dropbox.com/scl/fi/6wo0voidugxmgg0a81v20/lace-border-png-37013.png?rlkey=3hn4k762e8y0v6d2v6mwrtcbr&st=5o8bpex4") 60 fill round; Copied!

Chocolate border-width:7px; border-style:solid; border-image: url("https://foollovers.com/mat/menu05/51a-none.gif") 9 fill round; Copied!

Nene's Mask B1 (c) solielios

Nene's Mask B2 (c) solielios

Nene's Mask B3 (c) solielios

Flower Mask Collection (c) fiorefae

Tool Tip Hover <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="https://static.tumblr.com/lspzyz3/xloqk6cgp/jquery.style-my-tooltips.js"></script> <script> (function($) { $(document).ready(function() { $("[title]").style_my_tooltips({ tip_follows_cursor: true, tip_delay_time: 100, tip_fade_speed: 300, attribute: "title" }); }); })(jQuery); </script> <style> #s-m-t-tooltip { z-index: 9999; background: #fff; font-size: 12px; line-height: 13px; font-family:lucida console; letter-spacing: 1px; border:solid 1px; moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; text-transform: normal; color: {color:Link Title Text}; max-width: 150px; word-wrap: break-word; padding: 2px 5px 2px 6px; display: block; margin: 24px 14px 7px 12px } </style> Copied!

Fog Mask -webkit-mask-image: url(https://i.ibb.co/JjDXBPr/ED5929-CE-1-D66-4-EC4-8-F8-A-14792-D8-F2384.png); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; border-radius: 15px; -webkit-mask-position: center; Copied!

Circle Mask -webkit-mask-image: url(https://i.imgur.com/1PjqQS6.png); -webkit-mask-size: 200%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; Copied!

Star Mask (c) imiyaimi -webkit-mask-image: url(https://i.imgur.com/Nfc5Pr6.png); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; Copied!

Paper Mask -webkit-mask-image: url(https://i.ibb.co/KhqQW5x/73696-B1-E-A0-D7-4529-B2-D2-FB27-F0-D5-B437.png); -webkit-mask-size: 150%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; Copied!

Blurred Edges Mask background-image: url('https://64.media.tumblr.com/79a04b5e2e9b8f297bf8c0467444c4f5/tumblr_n4wzplYfWD1r3hi20o1_500.png'); width: 200px; height: 200px; /* you need to match the shadow color to your background or image border for the desired effect*/ box-shadow: 0 0 8px 8px white inset; Copied!

Pop Animation .img-popinoutanim { -webkit-animation: pop 1s ease-in-out infinite alternate; animation: pop 1s ease-in-out infinite alternate; -moz-animation: pop 1s ease-in-out infinite alternate; } @keyframes pop { from { transform:scale(0.95) } 50% { transform:scale(1) } to { transform:scale(0.95) } } Copied!

Float Animation .img-floatinganim { animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, -0px); } } Copied!

Hello Kitty Mask (c) vilIarreaI -webkit-mask-image: url(https://dl.dropbox.com/scl/fi/upfrxxysrq7ohzi4lkz1w/57a622d5e160e83551bea56ff47b4f49-removebg-preview.png?rlkey=y03l4z82olqm1xyo2waz2ssp0&st=5aa62bk8); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; Copied!

Rotate Blur Hover #rotate { overflow: hidden; display: inline-block; } #rotate img { transition: transform .5s; } #rotate:hover img { transform: scale(1.25) rotate(10deg); transform-origin: 50% 50%; webkit-filter: blur(.5px); filter: blur(.5px); } Copied!

jellymask image twitch
Example @keyframes heart{ 0%, 12%, 25%, 50% { transform: rotate(0deg); } 55% { transform: rotate(-2.5deg); } 65% { transform: rotate(3.5deg); } 75% { transform: rotate(-7deg); } 95%, 100& { transform: rotate(0deg); }} #image02{ animation: heart 1.5s ease infinite; } Copied!

Heart Hover .img-hearthover { transition: all 0.5s; display: block; transition: 1s ease; -webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png); -webkit-mask-size: 220%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .img-hearthover:hover{ transition: all 0.5s; -webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } Copied!

Star Hover (c) tubbox .img-starhover { -webkit-mask-image: url(https://i.imgur.com/WPTnhzY.png); -webkit-mask-size: 250%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; transform:rotate(0deg); transition:0.3s; } .img-starhover:hover{ -webkit-mask-size: 100%; transform:rotate(-15deg); transition:0.3s; } Copied!

Bounce Hover .img-infinitebouncehover { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .img-infinitebouncehover:hover { -webkit-animation-name: bounces; animation-name: bounces; } @-webkit-keyframes bounces { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounces { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } Copied!

Shake Hover .img-shakehover { animation: shake 0.5s; animation-iteration-count: infinite; -webkit-filter:blur(1px); -webkit-transition: .5s ease-in; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } } Copied!

Grayscale Hover .img-grayscalehover{ filter: grayscale(0%); transition: .25s ease-out; } .img-grayscalehover:hover{ filter: grayscale(100%); transition: .25s ease-in; } Copied!

Saturate Hover .img-saturatedhover { filter: saturate(100%); transition: .25s ease-out; } .img-saturatedhover:hover { filter: saturate(200%); transition: .25s ease-in; } Copied!

Slide Right Hover .img-sliderighthover { -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } .img-sliderighthover:hover { margin-left: 30px } Copied!

Dropshadow on Image filter: drop-shadow(1px 1px 0 purple) drop-shadow(-1px 1px 0 purple) drop-shadow(0 2px 0 purple) drop-shadow(0 -1px 0 purple) drop-shadow(0 1px 1.5px purple) drop-shadow(0 -1px 1.5px purple) drop-shadow(1px -1px 1.5px purple) drop-shadow(-1px -1px 1.5px purple); Copied!

Uneven Border border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; border: 3px solid #eb78ae; Copied!

Gradient Border border: 3px solid; border-image-slice: 1; border-image-source: linear-gradient(purple, grey); Copied!

Inset Border border: 9px inset grey; Copied!

Double Border border: double purple; Copied!

Dashed Border border: dashed purple; Copied!

Dotted Border border: dotted purple; Copied!