SCRIPTED RESOURCES

scripted resources scripted.neocities.org

• Tutorial: Create frame and borders from material websites - This tutorial can be applied to images, scrollbox and any elements you like to put a decorative frame on.

• Adding overflow: scroll; in your style makes an element scrollable.

Border

Shadow inset

<body>
  <div id="container">
    Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans.
  </div>
  <style>
    #container {
      overflow: scroll;
      height: 10em;
      width: 10em;
      padding: 1rem;
      border-radius: 10px;
      box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }

#container::-webkit-scrollbar {
      width: 0; /* remove scrollbar space */
      background: transparent; /* to make scrollbar invisible */
    }

#container::-webkit-scrollbar-thumb {
      background: transparent;
    }
  </style>
</body>

Dashed

#container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
     border: 3px dashed purple;
    }
  </style>
</body>

Dotted

Double

Glowcross (c) lovermonth

Rainbow

Skewed

Uneven

Scrollbar

Invisible

#container::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

#container::-webkit-scrollbar-thumb {
      background: transparent;
    }
  </style>
</body>

#container::-webkit-scrollbar {
        width: 8px;
        }

#container::-webkit-scrollbar-track {
        background-color: #e4e4e4;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        }

#container::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #e4e4e4;
        border: 1px solid #aaa;
        }
        
      
  </style>
</body>

Style 3

::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }

::-webkit-scrollbar-track {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
      image-rendering: pixelated;
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

::-webkit-scrollbar-track:active {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

::-webkit-scrollbar-thumb {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      z-index: 1;
    }

::-webkit-scrollbar-corner {
      background-color: #cccccc;
    }

::-webkit-resizer {
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
      background-position: bottom right;
      background-repeat: no-repeat;
      image-rendering: pixelated;
    }

::-webkit-scrollbar-button,
    .scroll::-webkit-scrollbar-button {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      display: block;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      image-rendering: pixelated;
      background-repeat: no-repeat;
      background-position: center center;
    }

::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      background-position: 2px 2px;
    }

::-webkit-scrollbar-button:horizontal:decrement,
    .scroll::-webkit-scrollbar-button:horizontal:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
    }

::-webkit-scrollbar-button:horizontal:increment,
    .scroll::-webkit-scrollbar-button:horizontal:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
    }

::-webkit-scrollbar-button:vertical:decrement,
    .scroll::-webkit-scrollbar-button:vertical:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
    }

::-webkit-scrollbar-button:vertical:increment,
    .scroll::-webkit-scrollbar-button:vertical:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
    }

::-webkit-scrollbar-button:horizontal:increment:start,
    .scroll::-webkit-scrollbar-button:horizontal:increment:start {
      display: none;
    }

::-webkit-scrollbar-button:horizontal:decrement:end,
    .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
      display: none;
    }

::-webkit-scrollbar-button:vertical:increment:start,
    .scroll::-webkit-scrollbar-button:vertical:increment:start {
      display: none;
    }

::-webkit-scrollbar-button:vertical:decrement:end,
    .scroll::-webkit-scrollbar-button:vertical:decrement:end {
      display: none;
    }

::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      border-top: 1px solid #868a8e;
      border-left: 1px solid #868a8e;
      border-bottom: 1px solid #868a8e;
      border-right: 1px solid #868a8e;
      box-shadow: none;
    }
  </style>
</body>

Style 4

<style>

#container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
    }

::-webkit-scrollbar {
        width: 14px;
        }

::-webkit-scrollbar:horizontal {
        height: 14px;
        }

::-webkit-scrollbar-corner {
        background: #eee;
        }

::-webkit-scrollbar-track:vertical {
        background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
        border-radius: 5px;
        }

::-webkit-scrollbar-track:horizontal {
        background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        border-radius: 5px;
        }

::-webkit-scrollbar-thumb {
        border: 1.5px solid #888;
        border-radius: 5px;
        box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
        }

::-webkit-scrollbar-thumb:vertical {
        background: linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
        }

::-webkit-scrollbar-thumb:horizontal {
        background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
        }

::-webkit-scrollbar-button:horizontal:end:increment,
        ::-webkit-scrollbar-button:horizontal:start:decrement,
        ::-webkit-scrollbar-button:vertical:end:increment,
        ::-webkit-scrollbar-button:vertical:start:decrement {
        display: block;
        }

::-webkit-scrollbar-button:vertical {
        height: 15px;
        }

::-webkit-scrollbar-button:vertical:start:decrement {
        background: white;
        background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #eee;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #888;
        border-radius: 5px;
        }

::-webkit-scrollbar-button:vertical:start:increment {
        display: none;
        }

::-webkit-scrollbar-button:vertical:end:decrement {
        display: none;
        }

::-webkit-scrollbar-button:vertical:end:increment {
        background: white;
        background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #eee;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #888;
        border-radius: 5px;
        }

::-webkit-scrollbar-button:horizontal {
        width: 14px
        }
        ::-webkit-scrollbar-button:horizontal:start:increment {
        display: none;
        }
        ::-webkit-scrollbar-button:horizontal:end:decrement {
        display: none;
        }

::-webkit-scrollbar-button:horizontal:start:decrement {
        background: white;
        background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border-radius: 5px;
        border: 1.5px solid #888;
        }

::-webkit-scrollbar-button:horizontal:end:increment {
        background: white;
        background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border-radius: 5px;
        border: 1.5px solid #888;
        }
        
      
  </style>
</body>

Style 5

::-webkit-scrollbar {
      width: 16px;
    }

::-webkit-scrollbar:horizontal {
      height: 17px;
    }

::-webkit-scrollbar-corner {
      background: #eee;
    }

::-webkit-scrollbar-track:vertical {
      background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
    }

::-webkit-scrollbar-track:horizontal {
      background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
    }

::-webkit-scrollbar-thumb {
      border: 1.5px solid #888;
      border-radius: 3px;
      box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
      background-color: #eee;
    }

::-webkit-scrollbar-thumb:vertical {
      background: url("https://i.imgur.com/bfyvjnx.png") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
    }

::-webkit-scrollbar-thumb:horizontal {
      background: url("https://i.imgur.com/tqe4SxM.png") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
    }

::-webkit-scrollbar-button:horizontal:end:increment,
    ::-webkit-scrollbar-button:horizontal:start:decrement,
    ::-webkit-scrollbar-button:vertical:end:increment,
    ::-webkit-scrollbar-button:vertical:start:decrement {
      display: block;
    }

::-webkit-scrollbar-button:vertical {
      height: 17px;
    }

::-webkit-scrollbar-button:vertical:start:decrement {
      background: white;
      background-image: url("https://i.imgur.com/EFnEMEb.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

::-webkit-scrollbar-button:vertical:start:increment {
      display: none;
    }

::-webkit-scrollbar-button:vertical:end:decrement {
      display: none;
    }

::-webkit-scrollbar-button:vertical:end:increment {
      background: white;
      background-image: url("https://i.imgur.com/xuIt6Lc.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
  </style>
</body>

Ipod nano (c) b8nadryl

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
<body>
  <div id="container">
    Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans.
  </div>

#container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
    }

::-webkit-scrollbar {
width: 14px
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
border-left: 1px solid #888;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, rgba(27,66,122,1) 0%, rgba(194,224,255,1) 28%, rgba(138,194,238,1) 55%, rgba(202,227,252,1) 87%);
  border-left: 1px solid #888;
}

/*horizontal scroll*/

::-webkit-scrollbar:horizontal {
height: 14px
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
 border-top: 1px solid #888;
}

::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(180deg, rgba(27,66,122,1) 0%, rgba(194,224,255,1) 28%, rgba(138,194,238,1) 55%, rgba(202,227,252,1) 87%);
  border-top: 1px solid #888;
}
  </style>
</body>
</html>

Miscellaneous

Expand or change height

<style>

#container {
      overflow: scroll;
      overflow-x:hidden;
      overflow-y:scroll;
      padding: 1rem;
      width: 60%;
      border: 3px double purple;
      transition: width 0.7s ease;
      height: 5em;
    }

#container:hover {
      width: 80%;
      height: 10em;
      background: #fedeee;
    }
  </style>

Gradient Background

<style>

#container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, #D4E4BC 0%, #CFCFCD 100%);
        /* Visit cssgradient.io (optional) for customizing your gradient background color*/
       
    }
  </style>
</body>

Image Background

Solid Color Background

<body>
  <div id="container">
    <p>Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans.</p>
  </div>

</style>
</body>

Horizontal Scrollbox

.lala {
	    width: 10em;
	    overflow-y:scroll;
	    overflow-x:hidden;
	    border: 1px solid black;
	    white-space: normal;
	    display: inline-block;
	    height: 90%;
	    padding: .3em;
	    vertical-align: middle;
	  }

</style>
	<div id="hoohoo">
	  <div class="lala"> First Column... Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans. </div>
	  <div class="lala">Second Colummn.... Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans. </div>
	  <div class="lala"> Third.... More stuff here </div>
	  <div class="lala"> More</div>
	  <div class="lala"> More stuff here </div>

Jichuwee scrollbox

</style>

<br>

💀.drr.ac scrollbox

<div id="contec">
    <span>FILE 1</span><mark>ABOUT</mark>
       <p><a href="https://web.archive.org/web/20220504173939/https://nao.drr.ac/">Example carrd of mine</a> Cake lemon drops soufflé gingerbread icing gingerbread cheesecake cheesecake. Icing cookie gummies I love I love cotton candy sugar plum. Icing chupa chups danish dragée chocolate bar cookie dessert I love.</p>
    </div>
  </div>
</center>

@font-face {
    font-family: starborn;
    src: url(https://dl.dropbox.com/s/l0541on0m5eqvdj/Starborn.ttf);
  }
  
  @font-face { 
  font-family: "VCr"; 
    src: url(https://cinni.net/fonts/basiic.ttf); 
  }
  
  mark, span {
    font-size:1.3em;
    overflow:none;
    background-color:transparent;
    font-family: starborn;
    font-weight:700;
    color:#fff;
    text-align:center;
    -webkit-text-stroke-width: 1.2px;
    -webkit-text-stroke-color: #0f1315; -webkit-text-fill-color: #fff; position: relative; z-index: 9; display:inline-block; 
  }
  
  #contec p, #contec a {
    text-align: left;
    font-family: "VCr";
    color: #83a1be;
    transition: opacity 1000ms;
  }

#contec:hover{
    overflow-x:hidden;
    overflow-y:scroll;
  }
  
  #contec:hover p, #contec:hover a {
    color: #fff;
    text-align: left;
    font-family: vcr;
    -webkit-animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both;
    animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both
  }
  
  mark{display:none;}
  
  #contec:hover mark  {
    font-weight: 700;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    -webkit-text-fill-color: #a0beac;
    z-index: 9999;
    display: inline;
  }

#contec:hover span{
    display: none;
  }
 
  #contec {
    -webkit-box-shadow: 1px 1px 5px 0px rgba(160, 190, 172, 0.78);
    box-shadow: 1px 1px 5px 0px rgba(160, 190, 172, 0.78);
    border: 2px solid #d3e1d4;
    background: #83a1be;
    border-radius: 7px;
    width:40%;
    height: 70px;
    transition: 0.6s ease;
    padding: 5px;
    cursor: help;
    overflow: scroll;
    overflow-x: hidden;
    display: inline-block;
    transition: transform 1s;
    z-index: 8;
    overflow:hidden;
  }

#contec:hover {
    background: #83a1be;
    z-index: 9999;
    position: relative;
    width: 50%;
    height: 90px;
    transform: translate(12px, 27px) scale(1.8, 1.8);
  }

/* ---------------------------------------------- * 
Generated by Animista on 2022-4-19 11:37:1 * 
Licensed under FreeBSD License. * See http://animista.net/license for more info. *
 w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
  @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0
    }

100% {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1
    }
  }

@keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0
    }

100% {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1
    }
  }
  
  ::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }
</style>

Shake Hover

.imager0 /*image*/ {
    display: block;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    border-radius: 8px;
}

.overlayr0 {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    top: 0;
    background: rgb(255, 229, 251);
    background: radial-gradient(circle, rgba(255, 229, 251, 1) 0%, rgba(255, 148, 190, 1) 50%);
    overflow-x: hidden;
    overflow-y: scroll;
    width: 150px; /* the container width */
    height: 0;
    transition: 0.8s;
    -moz-transition: 0.8s;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
}

.containerr0:hover .overlayr0 {
    animation: shakeit 1s, image_blur 1s;
    transition: all 1s ease-in-out;
    transition-timing-function: cubic-bezier(0.1, 0.8, 0.9, 0.1);
    bottom: 0;
    top: 0;
    height: 150px; /* height of container */
    border: 1px solid black;
    border-radius: 8px;
}

.textr0 {
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
    font-size: .5rem;
    text-align: left;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 130px; /* width of scrollable text, make this smaller */
    height: 150px; /* height of scrollable text */
    padding: 10px;
    line-height: 1.2em;
    letter-spacing: -0.05;
}

@keyframes shakeit {
    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);
    }
}

@-webkit-keyframes image_blur {
    0% {
        -webkit-filter: blur(0px);
    }

50% {
        -webkit-filter: blur(5px);
    }

100% {
        -webkit-filter: blur(0px);
    }
}

@keyframes fadeIn {

0%,
    80% {
        opacity: 0;
    }

100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {

0%,
    80% {
        opacity: 0;
    }

100% {
        opacity: 1;
    }
    
</style>
<div id="containerr0"></div>
<div class="containerr0">
    <img
        src="https://scripted.neocities.org/image.jpg"
        alt="Avatar"
        class="imager0"
        />
    <div class="overlayr0">
        <div class="textr0">
            <center>
                image shake on hover to reveal scrollbox version 2 <br />
                <a href="https://liveweave.com/Rj1zVV">code</a>
                <br />
                Candy gummies macaroon gummi bears marshmallow dragée.
                Croissant jujubes bonbon oat cake dragée sugar plum. Marshmallow
                donut oat cake muffin cheesecake lollipop apple pie apple pie
            </center>
        </div>
    </div>
</div>

Smooth Hover