Expanding Info Box

Developer
Sjmcpherson
Size
2,992 Kb
Views
20,240
  1. Expanding Info Box Previews
  2. Expanding Info Box HTML Codes
  3. Expanding Info Box CSS Codes
  4. Expanding Info Box JS Codes

How do I make an expanding info box?

What is a expanding info box? How do you make a expanding info box? This script and codes were developed by Sjmcpherson on 24 September 2022, Saturday.

Expanding Info Box Previews
IQ Test

Expanding Info Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Expanding Info Box</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="expand-box" class="expanded"> <div class="round-part"> <div class="wrapper"> <p>"Welcome to the wonderful world of entertainment, where art imitates life and people get famous." <span>CHARLIE TUNA (Jurassic 5)</span> </p> </div> </div> <a href="#" id="button">+</a>
</div> <script src="js/index.js"></script>
</body>
</html>

Expanding Info Box - Script Codes CSS Codes

#expand-box { position: absolute; bottom: 10px; font-family: Helvetica;
}
.round-part { position: absolute; left: 0; bottom: 0; width: 300px; height: 300px; border-radius: 50%; background-color: #293447; -webkit-transform: scale(0.15); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); transform: scale(0.15); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; transition: all 0.6s ease-in-out;
}
.wrapper { width: 80%; height: 100%; padding: 0 10%; position: absolute; text-align: center; display: table;
}
.wrapper p { text-align: left; font: normal 1.1em/1.5em Georgia; display: inline-block; vertical-align: middle; display: table-cell; overflow: hidden; color: #ddddee; opacity: 0; transition: all 0.6s ease-in-out;
}
.wrapper p span { display: block; font: normal 100% arial; padding: 10px 0;
}
a { position: absolute; text-decoration: none; transition: all 0.6s ease-in-out; bottom: 0px; left: 10px; z-index: 999; font-size: 2.8em; text-align: center; color: #ddddee; cursor: pointer; transform: rotate(0deg);
}
.expanded .round-part { -webkit-transform: scale(1); transform: scale(1); border-radius: 5%;
}
.expanded .wrapper p { opacity: 1;
}
.expanded a { transform: rotate(315deg); color: #cc606f;
}

Expanding Info Box - Script Codes JS Codes

(function(){ var d = document; var expandBox=d.getElementById("expand-box"), button=expandBox.querySelector("#button"), expandedToggle; button.addEventListener('click',function(e){ if(!expandedToggle){ expandBox.setAttribute('class','expanded'); expandedToggle=true; }else{ expandBox.setAttribute('class',''); expandedToggle=false; } return false; });
})();
Expanding Info Box - Script Codes
Expanding Info Box - Script Codes
Home Page Home
Developer Sjmcpherson
Username sjmcpherson
Uploaded September 24, 2022
Rating 3
Size 2,992 Kb
Views 20,240
Do you need developer help for Expanding Info Box?

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!

Sjmcpherson (sjmcpherson) Script Codes
Name
Blockquote design
CSS3 3D Shirt Flipper
A Pen by sjmcpherson
Rollover CSSS Blur Filter Image Gallery
File API demo
Display popup on first visit only
AngularJS View only DOM manipulation
CSS backface-visibility contact form
CSS Only Animated Tooltip
CSS animated notification badge
Create amazing SEO content 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!