Flexbox Flex-Grow Mast

Developer
Thomas Vaeth
Size
2,773 Kb
Views
54,648
  1. Flexbox Flex-Grow Mast Previews
  2. Flexbox Flex-Grow Mast HTML Codes
  3. Flexbox Flex-Grow Mast CSS Codes

How do I make an flexbox flex-grow mast?

The homepage mast for Health Innovation / Kaiser Permanente. Flexbox was used for the four column layout with a hover transition on flex-grow.. What is a flexbox flex-grow mast? How do you make a flexbox flex-grow mast? This script and codes were developed by Thomas Vaeth on 08 September 2022, Thursday.

Flexbox Flex-Grow Mast Previews
IQ Test

Flexbox Flex-Grow Mast - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Flex-Grow Mast</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="home-mast"> <div class="home-mast__container"> <div> <div class="absolute-bg" style="background-image: url('https://source.unsplash.com/3IEZsaXmzzs/1500x1200');"></div> </div> <div class=""> <div class="absolute-bg" style="background-image: url('https://source.unsplash.com/OcWwYCVIOOU/1500x1200');"></div> </div> <div class=""> <div class="absolute-bg" style="background-image: url('https://source.unsplash.com/z55CR_d0ayg/1500x1200');"></div> </div> <div class=""> <div class="absolute-bg" style="background-image: url('https://source.unsplash.com/-FgZlbzZ0R8/1500x1200');"></div> </div> </div>
</section>
</body>
</html>

Flexbox Flex-Grow Mast - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { margin: 0;
}
.absolute-bg { position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; background-position: 50%; background-repeat: no-repeat; background-size: cover; overflow: hidden;
}
.home-mast { height: 100vh;
}
.home-mast__container { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%;
}
.home-mast__container > * { position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 1em; -webkit-transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit-box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit-box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit-box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -ms-flex-positive 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.home-mast__container > *:hover { -webkit-box-flex: 3; -ms-flex-positive: 3; flex-grow: 3;
}
.home-mast__container > *:nth-child(1):after { content: ""; position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; background-color: #00a19b; opacity: 0; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out;
}
.home-mast__container > *:nth-child(1):hover:after { opacity: 0.65; -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
.home-mast__container > *:nth-child(2):after { content: ""; position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; background-color: #bb1654; opacity: 0; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out;
}
.home-mast__container > *:nth-child(2):hover:after { opacity: 0.65; -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
.home-mast__container > *:nth-child(3):after { content: ""; position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; background-color: #006ba6; opacity: 0; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out;
}
.home-mast__container > *:nth-child(3):hover:after { opacity: 0.65; -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
.home-mast__container > *:nth-child(4):after { content: ""; position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; background-color: #e6661f; opacity: 0; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out;
}
.home-mast__container > *:nth-child(4):hover:after { opacity: 0.65; -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
Flexbox Flex-Grow Mast - Script Codes
Flexbox Flex-Grow Mast - Script Codes
Home Page Home
Developer Thomas Vaeth
Username thomasvaeth
Uploaded September 08, 2022
Rating 4.5
Size 2,773 Kb
Views 54,648
Do you need developer help for Flexbox Flex-Grow Mast?

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!

Thomas Vaeth (thomasvaeth) Script Codes
Name
Recipe Book
Twitch.tv
SVG Mouse Animation
Button Draw on Hover Mixin
Calculator
Full Viewport Z-Index Scroll
Flexbox Grid Animation
Instafetch.js Example
Pomodoro Clock
Personal Portfolio Webpage
Create amazing web 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!