Multiply blend mode on hover

Developer
Chris Maki
Size
2,641 Kb
Views
24,288
  1. Multiply blend mode on hover Previews
  2. Multiply blend mode on hover HTML Codes
  3. Multiply blend mode on hover CSS Codes

How do I make an multiply blend mode on hover?

Uses 'mixed blend mode' to cover image using multiply on hover. . What is a multiply blend mode on hover? How do you make a multiply blend mode on hover? This script and codes were developed by Chris Maki on 12 August 2022, Friday.

Multiply blend mode on hover Previews
IQ Test

Multiply blend mode on hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>multiply blend mode on hover</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<div class="grid-container">
<!--Box 1-->
<div class="box box-1"> <a href="#"> <!--Overlay with multiply--> <div class="overlay"></div> <img src="https://images.unsplash.com/photo-1461409971633-aa0e46732112?crop=entropy&fit=crop&fm=jpg&h=725&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925" alt="eBook The Future of Technology " alt="" /> <h2 class="exec-name">Person One</h2> <div class="exec-title">What I Do</div> <div class="box-button">Learn More</div> </a>
</div> <!--Box 2-->
<div class="box box-2"> <a href="#"> <!--Overlay with multiply--> <div class="overlay"></div> <!--Darker Red For CTA--> <div class="cta-overlay"></div> <img src="https://images.unsplash.com/photo-1458640904116-093b74971de9?crop=entropy&fit=crop&fm=jpg&h=725&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925" alt="eBook The Future of Technology " /> <h2 class="exec-name">Person Two</h2> <div class="exec-title">What I Do</div> <!--CTA in angeled red--> <div class="cta-2">Learn More</div> </a>
</div> <!--Box Three for filler to complete grid-->
<div class="box"> <div class="overlay"></div> <img src="https://images.unsplash.com/photo-1453227588063-bb302b62f50b?crop=entropy&fit=crop&fm=jpg&h=725&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925" alt="" /> <h2 class="exec-name">Person Three</h2> <div class="exec-title">What I Do</div>
</div>
</div><!--grid container-->
</div><!--container-->
</body>
</html>

Multiply blend mode on hover - Script Codes CSS Codes

body { font-family: Helvetica, sans-serif;
}
.container { max-width: 1280px; margin: 0 auto;
}
/****************** Grid?
******************/
.box { background-color: gray; height: 420px; width: 33%; position: relative; display: inline-block; overflow: hidden;
}
.overlay { position: absolute; background: #d31111; background: rgba(211, 17, 17, 0.9); width: 800px; height: 800px; mix-blend-mode: multiply; z-index: 100; -webkit-transform: rotate(75deg); transform: rotate(75deg); -webkit-transition: .12s ease; transition: .12s ease; top: 300px; left: -90px;
}
/*Dark Red for cta background in box 2*/
.cta-overlay { background: #901212; position: absolute; width: 800px; height: 800px; opacity: 0; z-index: 101; -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transition: .12s ease; transition: .12s ease; top: 350px; left: -90px;
}
/*********************** Names and titles
************************/
.exec-name { color: white; font-size: 1.8em; font-weight: 200; position: absolute; right: 0; bottom: 0; margin: 0 20px 50px 0; -webkit-transition: .2s ease; transition: .2s ease; z-index: 100;
}
.exec-title { color: white; font-size: 1.1em; font-weight: 200; position: absolute; right: 0; bottom: 0; margin: 0 20px 20px 0; z-index: 100; -webkit-transition: .2s ease; transition: .2s ease;
}
/*for button in box 1*/
.box-button{ background-color: white; border: 1px solid #fff; border-radius: 4px; bottom: -100px; color:red; position: absolute; right: 0; font-weight: 700; left: 20%; margin-left: -6px; bottom: -100px; padding: .8em 0; -webkit-transition: .2s ease; transition: .2s ease; text-align: center; width: 60%; z-index: 100;
}
/*for cta in box 2*/
.cta-2 {	color: white; position: absolute; right: 0; font-size: 1.4em; font-weight: 200; bottom: -100px; padding-right: 20px; -webkit-transition: .2s ease; transition: .2s ease; z-index: 112;
}
/******************** Hover Styles
********************/
.box:hover .overlay { top: 0; -webkit-transform: rotate(0); transform: rotate(0);
}
.box:hover .exec-name { top: 50%;
}
.box:hover .exec-title { opacity: 0;
}
/*For Hover CTA Number 1*/
.box:hover .box-button { bottom: 50px;
}
/*For Hover CTA Background Number 2*/
.box:hover .cta-overlay { opacity: 1;
}
/*For Hover CTA Number 2*/
.box:hover .cta-2 { bottom: 20px;
}
Multiply blend mode on hover - Script Codes
Multiply blend mode on hover - Script Codes
Home Page Home
Developer Chris Maki
Username chrisMaki
Uploaded August 12, 2022
Rating 3
Size 2,641 Kb
Views 24,288
Do you need developer help for Multiply blend mode on hover?

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!

Chris Maki (chrisMaki) Script Codes
Name
Css expanding search
Mobile navigation using GSAP
Simple Responsive Modal
Show dialogue with blur animation
Scroll to view if element partially out of view port height
Accordion with pagination
Messing with GSAP
Light bulb svg loader
Objects move into place when scrolled into view
Overlay using mix-blend-mode
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!