Boxes with Hover Text

Developer
KatieK
Size
3,122 Kb
Views
8,096
  1. Boxes with Hover Text Previews
  2. Boxes with Hover Text HTML Codes
  3. Boxes with Hover Text CSS Codes

How do I make an boxes with hover text?

Hover over the boxes for details.. What is a boxes with hover text? How do you make a boxes with hover text? This script and codes were developed by KatieK on 12 January 2023, Thursday.

Boxes with Hover Text Previews
IQ Test

Boxes with Hover Text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Boxes with Hover Text</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/abcei.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Generated color scheme</h1>
<h2></h2>
<p>Hover the boxes for information about how the color is generated.</p>
<div class="box"> <p>Color1</p> <p class="expand">default color variable</p>
</div>
<div class="box"> <p>Color2</p> <p class="expand">inverted</p>
</div>
<div class="box"> <p>Color3</p> <p class="expand">hue adjusted</p>
</div>
<div class="box"> <p>Color4</p> <p class="expand">hue adjusted the other direction</p>
</div>
<div class="box"> <p>Color5</p> <p class="expand">mixed with 20% inverted color - (washes out to grey)</p>
</div>
</body>
</html>

Boxes with Hover Text - Script Codes CSS Codes

$color1: $color;
// $color1: #492A35;
$color2: invert($color1);
$color3: adjust_hue($color1, 120);
$color4: adjust_hue($color1, 240);
$color5: mix($color1, $color2, 80%);
$bg-color: #7f7f7f; //middle grey
$hover-bg: rgba(255, 255, 255, .3);
body { background-color: $bg-color; color: black;
}
.box { height: 250px; width: 250px; border: solid black 1px; position: relative; text-align: center; float: left; background-color: $color1; &:nth-of-type(2) { background-color: $color2; } &:nth-of-type(3) { background-color: $color3; } &:nth-of-type(4) { background-color: $color4; } &:nth-of-type(5) { background-color: $color5; } p { margin: 1rem auto 0; &.expand { outline: solid black 1px; background: $hover-bg; position: absolute; bottom: 0; width: 100%; display: none; padding: .5rem; box-sizing: border-box; } } &.box:hover { cursor: pointer; } &.box:hover .expand { display: block; }
}
Boxes with Hover Text - Script Codes
Boxes with Hover Text - Script Codes
Home Page Home
Developer KatieK
Username KatieK2
Uploaded January 12, 2023
Rating 3
Size 3,122 Kb
Views 8,096
Do you need developer help for Boxes with Hover Text?

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!

KatieK (KatieK2) Script Codes
Name
Text Blocks Over Image, Updated
Fun with Clipping
Reverse the String
Mathematically Pefect Hexagon
Transparent Textures
Image Caption
Grid with Collapsing Borders
CSS Content Generation Demos
Experiments with Sass Color Functions
SVG Experiments with coordinate system transforms
Create amazing blog posts 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!