Hover triangle wipe css

Developer
Alex Coven
Size
2,559 Kb
Views
42,504
  1. Hover triangle wipe css Previews
  2. Hover triangle wipe css HTML Codes
  3. Hover triangle wipe css CSS Codes
  4. Hover triangle wipe css JS Codes

How do I make an hover triangle wipe css?

The client likes triangles, and has many accompanied with their brand. so these hover states will be site wide. All done with :before and :after psuedo elements.. What is a hover triangle wipe css? How do you make a hover triangle wipe css? This script and codes were developed by Alex Coven on 11 August 2022, Thursday.

Hover triangle wipe css Previews
IQ Test

Hover triangle wipe css - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover triangle wipe css</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div id="expertise"> <div class="origin item">Origination / Site Selection</div> <div class="construction item">Construction / Design</div> <div class="leasing item">Leasing</div> <div class="financing item">Financing</div> <div class="entitlement item">Entitlement</div> <div class="asset item">Asset Management</div>
</div>
</body> <script src="js/index.js"></script>
</body>
</html>

Hover triangle wipe css - Script Codes CSS Codes

body { width:100%; height:100%; font-family: "Helvetica" sans-serif; font-weight: 100; font-size:8px; background:url('http://www.clarkstreet.com/sites/all/themes/centrum/images/about_chicago.jpg') no-repeat center rgba(0,0,0,0.8); overflow:hidden; /*removes scroll bar*/
}
#expertise { width:500px; height:500px; display:block; margin:0 auto; padding:25vh 0;
}
.item { position:relative; color: #fff; background-color: transparent; padding: 10px; width:47%; border: #fff solid 2px; margin-bottom:10px; display:inline-block; * display:inline; margin: 0px 3px 10px 3px; padding:20px; box-sizing:border-box; text-align:center; text-transform:uppercase; letter-spacing:2px; border-radius:2px; box-shadow:0px 2px 5px rgba(0,0,0,0.5); overflow:hidden;
}
.item:before { content:''; background-repeat: no-repeat; background-size: 100%; width:30px; height:40px; display:block; margin:0 auto;
}
.origin.item:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/1.png");
}
.origin.item:hover:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/1g.png");
}
.construction.item:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/2.png");
}
.construction.item:hover:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/2g.png");
}
.leasing.item:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/3.png");
}
.leasing.item:hover:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/3g.png");
}
.financing.item:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/4.png");
}
.financing.item:hover:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/4g.png");
}
.entitlement.item:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/5.png");
}
.entitlement.item:hover:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/5g.png");
}
.asset.item:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/6.png");
}
.asset.item:hover:before { background-image: url("http://dev-clark-street.gotpantheon.com/sites/all/themes/centrum/images/icon/6g.png");
}
.item:after { content: ""; display:block; border-top: 0 #fff solid; border-bottom: 15px transparent solid; border-left: 15px #fff solid; position:absolute; top:0; left:0; width:0; z-index:-1; overflow:hidden;
}
.item:hover:after { z-index:-1; border-left: 302px solid #fff; border-bottom:302px solid transparent; overflow:hidden; background-color:#007766;
}
.item:hover:before { background-image: url("http://cdn.flaticon.com/png/256/66740.png");
}
.item:hover { color:#007766; overflow:hidden; margin-bottom: 10px; cursor:pointer;
}
.item:hover, .item:after, .item { -webkit-transition: 0.5s color ease; -moz-transition: 0.5s color ease; -o-transition: 0.5s color ease; transition: 0.5s color ease;
}
.item:hover, .item:after { -webkit-transition: 0.5s border ease; -moz-transition: 0.5s border ease; -o-transition: 0.5s border ease; transition: 0.5s border ease;
}
.item:after { overflow:hidden;
}
.item:before, .item:hover:before, .item:hover:after { -webkit-transition: 0.75s all ease; -moz-transition: 0.75s all ease; -o-transition: 0.75s all ease; transition: 0.75s all ease;
}

Hover triangle wipe css - Script Codes JS Codes

// no js needed, works in all modern browsers. :D
Hover triangle wipe css - Script Codes
Hover triangle wipe css - Script Codes
Home Page Home
Developer Alex Coven
Username alcoven
Uploaded August 11, 2022
Rating 4.5
Size 2,559 Kb
Views 42,504
Do you need developer help for Hover triangle wipe css?

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!

Alex Coven (alcoven) Script Codes
Name
Squid Swimming Spinning SVG Animation
Atomic Hamburger Menu CSS
Gooey Menu CSS no SVG
Word randomize and replace.
Buildings Menu
Check it off
Charging Battery CSS
Scroll SVG fill animation
SVG Squid Swimming WIP Hover
CSS Heart to X WIP
Create amazing marketing copy 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!