Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- @font-face {
- font-family: 'Magica';
- src:
- url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
- }
- figure.blurfilter{
- margin: -6px;
- padding: 0;
- display: inline-block;
- position: relative;
- overflow: hidden; /
- border-radius:70%;
- border-width:7px;
- border-style:solid;
- border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
- }
- .figcaption img {
- width: 10px;
- }
- figure.blurfilter img{
- display: block;
- width: 250px;
- height: auto;
- transition: all 0.4s 0.4s;
- }
- figure.blurfilter figcaption{
- position: absolute;
- display: block;
- text-align: left;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- text-align: justify;
- background: white;
- border: 3px double #000;
- border-radius: 10px;
- padding: 7px;
- z-index: 100;
- width: 90%;
- height: 90%;
- line-height: 15px;
- overflow: auto;
- top: 5%;
- left: 5%;
- font-size: 12px;
- font-family: 'Magica';
- opacity: 0;
- -moz-transition: all 0.4s;
- -webkit-transition: all 0.4s;
- transition: all .4s;
- }
- figure.blurfilter figcaption h3{
- text-align: left;
- width: 90%;
- margin: 0;
- }
- margin: 1px 1px;
- }
- figure.blurfilter figcaption p{
- text-align: left;
- margin-top: 5px;
- line-height: 1;
- }
- .button { /* add your button here. you can change the color and basically all the things you want to lol */
- background-color: #fff;
- border: 1px solid #000;
- border-radius: 5px;
- color: black;
- padding: 1px 1px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 12px;
- font-family: 'Magica';
- margin: 1px 1px;
- cursor: hidden; /* don't change this tho */
- }
- figure.blurfilter figcaption a{
- text-decoration: none;
- }
- figure.blurfilter:hover img{
- -webkit-filter: blur(5px);
- filter: blur(5px);
- -webkit-transform: scale(1.3);
- transform: scale(1.3);
- -moz-transition: all 0.4s;
- -webkit-transition: all 0.4s;
- transition: all 0.4s;
- }
- figure.blurfilter:hover figcaption{
- opacity: 1;
- -moz-transition: all .4s .4s;
- -webkit-transition: all .4s .4s;
- transition: all .4s .4s;
- }
- figcaption {
- overflow-y: scroll;
- }
- </style>
- <figure class="blurfilter default">
- <img src="https://cdn.discordapp.com/attachments/965819507794907138/984615113254391808/original_5.GIF">
- <figcaption>
- about me info info info info info
- <br></br>
- <font color="#000"><strong>kpop!</strong></font> info info info info info
- <br></br> <font color="#000"><strong>note!</strong></font> info info info info info
- <br></br>
- <button class="button"><strong>byf</strong></button> info info info info info
- <br></br>
- <button class="button"><strong>dni</strong></button> info info info info info
- </figcaption>
- </figure>
Advertisement
Add Comment
Please, Sign In to add comment