Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- please credit me if you somehow find & use this @catkanade on ig :3 cr nene for the border -->
- <style>
- #contain {
- display: block;
- position: relative;
- z-index: 99;
- border-width:10px;
- border-style:solid;
- border-image: url("https://i.imgur.com/gTFIwdW.png") 11 fill round;
- height: 75%;
- width: auto;
- }
- .mahhh {
- overflow: hidden;
- }
- .meow {
- object-fit: fill;
- position: relative;
- display: block;
- overflow: hidden;
- z-index: 99;
- height: 100%;
- transition: .8s ease;
- filter: saturate(115%);
- width: 100%;
- }
- .meow:hover {
- transition: .8s ease;
- transform: scale(1.8) translate(60px, 35px); /* remove the translate if you just want it to zoom inwards, if u need help dm me */
- filter: saturate(145%);
- }
- .popup {
- position: absolute;
- left: 0;
- overflow: hidden;
- right: 0;
- bottom: 7%;
- height: 0;
- border: 1px solid #fea0a0;
- z-index: 98;
- margin: auto;
- text-align: center;
- width: 40%;
- border-radius: 7px;
- background: white;
- transition: .7s ease;
- }
- #contain:hover .popup {
- position: absolute;
- bottom: -17%;
- transition: .7s ease;
- height: 4em;
- }
- .write {
- color: #fecdcc;
- text-shadow: -1px 0 #fea0a0, 0 1px #fea0a0, 1px 0 #fea0a0, 0 -1px #fea0a0, 0 0;
- display: inline-block;
- margin-bottom: 3px;
- text-align: center;
- font-family: mali;
- position: relative;
- top: 50%;
- font-size: 1.75em;
- }
- .write a {
- color: white;
- display: inline-block;
- transition: .4s ease;
- text-decoration: none;
- letter-spacing: normal;
- }
- .write a:hover {
- color: #fecdcc;
- transform: translate(0px, -6px);
- transition: .3s ease;
- }
- </style>
- <div id="contain"><div class="popup"><div class="write"><a href="#one">01</a> <a href="#two">02</a> <a href="#three">03</a></div></div><div class="mahhh"><img src="https://dl.dropbox.com/s/3cxmboj6yfat0va/Photo%20Nov%2017%2C%2010%2006%2058%20PM.jpg" class="meow"></div></div> /* please make sure to put your own images and such here :3 */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement