Hovergram

Developer
Ross B
Size
2,505 Kb
Views
16,192
  1. Hovergram Previews
  2. Hovergram HTML Codes
  3. Hovergram CSS Codes
  4. Hovergram JS Codes

How do I make an hovergram?

A floating 'hologram' type thing.. What is a hovergram? How do you make a hovergram? This script and codes were developed by Ross B on 24 November 2022, Thursday.

Hovergram Previews
IQ Test

Hovergram - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hovergram</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container hover-preview"> <div class="beam"></div> <div class="button-tilter"> <div class="button"></div> </div> <div class="text-container"> <div class="text">hover</div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Hovergram - Script Codes CSS Codes

html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.container { width: 80px; height: 80px; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; -webkit-perspective: 200px; perspective: 200px; -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease;
}
.button-tilter { -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; width: inherit; height: inherit; -webkit-transform: rotateX(30deg); transform: rotateX(30deg);
}
.button-tilter:before { content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 0; background-color: white;
}
.beam { -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-transform: translateY(10px) scaleY(0.1) scaleX(0.9); transform: translateY(10px) scaleY(0.1) scaleX(0.9); width: inherit; height: inherit; background: -webkit-linear-gradient(top, rgba(93,209,117,0) 0%, rgba(93,209,117,1) 100%); background: linear-gradient(to bottom, rgba(93,209,117,0) 0%, rgba(93,209,117,1) 100%);
}
.button-tilter, .text-container, .beam { position: absolute;
}
.button { box-sizing: border-box; border-radius: 50%; -webkit-transition: all 1s ease; transition: all 1s ease; width: inherit; height: inherit; background-color: white; position: absolute; border: 3px dashed transparent;
}
.text { -webkit-transition: all 1s ease; transition: all 1s ease; color: #444; text-transform: uppercase;
}
@-webkit-keyframes spin { 0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 50% { -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}
@keyframes spin { 0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 50% { -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}
@-webkit-keyframes bob { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes bob { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
.container:hover .button-tilter,
.container.hover-preview .button-tilter { -webkit-transform: scale(0.9) rotateX(55deg); transform: scale(0.9) rotateX(55deg);
}
.container:hover .button ,
.container.hover-preview .button { -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; box-shadow: 0 0 5px 2px green; border: 3px dashed lightgreen;
}
.container:hover .beam,
.container.hover-preview .beam{ -webkit-transform: scale(1.1) translateY(-20px) rotateX(-55deg); transform: scale(1.1) translateY(-20px) rotateX(-55deg); opacity: 0.5;
}
.container:hover .text-container ,
.container.hover-preview .text-container { -webkit-animation: bob 2s ease infinite; animation: bob 2s ease infinite;
}
.container:hover .text,
.container.hover-preview .text{ -webkit-transform: translateY(-60px) scale(1.5); transform: translateY(-60px) scale(1.5); text-shadow: 0 0 1px rgba(30, 244, 40, 0.5);
}
.container:active .button { -webkit-transition: none; transition: none; background-color: lightgreen;
}

Hovergram - Script Codes JS Codes

var container = document.querySelector('.container')
setTimeout(function() { container.classList.remove('hover-preview');
}, 2000);
Hovergram - Script Codes
Hovergram - Script Codes
Home Page Home
Developer Ross B
Username rocbear
Uploaded November 24, 2022
Rating 3
Size 2,505 Kb
Views 16,192
Do you need developer help for Hovergram?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ross B (rocbear) Script Codes
Name
Loading animation - freedom purchase
Liquid gold
UFO
Unfolding circular menu
Full page scroll-over with ScrollMagic
Plane vertex manipulation experiment
Babel React template
Playful inner-page navigation
Wobbly list
Context menu experiment
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!