Triangle Peeker

Developer
Derek Wheelden
Size
4,339 Kb
Views
28,336
  1. Triangle Peeker Previews
  2. Triangle Peeker HTML Codes
  3. Triangle Peeker CSS Codes
  4. Triangle Peeker JS Codes

How do I make an triangle peeker?

Images rotate slightly to reveal short bit of text.. What is a triangle peeker? How do you make a triangle peeker? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

Triangle Peeker Previews
IQ Test

Triangle Peeker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Triangle Peeker</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Lato:100,400);
.triangle { position: relative; width: 30rem; height: 15rem; margin: 2rem; padding: 0 40px; background: #9da6af; overflow: hidden; float: left; transition: all 0.5s ease-in-out;
}
.triangle.inactive { opacity: 0.5;
}
.triangle p { margin: 10px 0;
}
.triangle :before { content: ' '; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 15rem solid #d5d9dd; border-top-color: transparent; z-index: 1000;
}
.triangle.rotate:hover img { -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -ms-transform: rotate(-12deg); -o-transform: rotate(-12deg); transform: rotate(-12deg); -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right;
}
.triangle.slide:hover img { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px);
}
.triangle img { position: absolute; top: 0; left: -5%; width: 110%; z-index: 100; transition: all 0.5s ease-in-out;
}
.lt-ie9 .triangle:hover img { top: 40px;
}
/* General page styles */
* { box-sizing: border-box;
}
html { background: #d5d9dd; font-size: 62.5%;
}
body { width: 102rem; margin: 0 auto; font: 400 1.5rem Lato, sans-serif; color: white; backface-visibility: hidden;
}
h1 { margin: 20px 0 0; font: 100 4rem Lato, sans-serif; color: #394046; text-align: center; letter-spacing: 0.25rem; text-transform: uppercase;
}
body > p { margin: 10px 0; text-align: center; color: #9da6af;
}
.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body class="preload"> <h1>Triangle Peeker</h1> <p>You know the drill. Hover over the cats.</p> <div class="triangle rotate"> <p>So you could</p> <img src="http://placekitten.com/500/500" /> </div> <div class="triangle rotate"> <p>put some text</p> <img src="http://placekitten.com/g/300/300" /> </div> <div class="triangle rotate"> <p>in these guys,</p> <img src="http://placekitten.com/500/500" /> </div> <div class="triangle slide"> <p>maybe a name for example,</p> <img src="http://placekitten.com/g/300/300" /> </div> <div class="triangle slide"> <p>and then when you hover over</p> <img src="http://placekitten.com/500/500" /> </div> <div class="triangle slide"> <p>the text peeks out a little.</p> <img src="http://placekitten.com/g/300/300" /> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Triangle Peeker - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:100,400);
.triangle { position: relative; width: 30rem; height: 15rem; margin: 2rem; padding: 0 40px; background: #9da6af; overflow: hidden; float: left; transition: all 0.5s ease-in-out;
}
.triangle.inactive { opacity: 0.5;
}
.triangle p { margin: 10px 0;
}
.triangle :before { content: ' '; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 15rem solid #d5d9dd; border-top-color: transparent; z-index: 1000;
}
.triangle.rotate:hover img { -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -ms-transform: rotate(-12deg); -o-transform: rotate(-12deg); transform: rotate(-12deg); -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right;
}
.triangle.slide:hover img { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px);
}
.triangle img { position: absolute; top: 0; left: -5%; width: 110%; z-index: 100; transition: all 0.5s ease-in-out;
}
.lt-ie9 .triangle:hover img { top: 40px;
}
/* General page styles */
* { box-sizing: border-box;
}
html { background: #d5d9dd; font-size: 62.5%;
}
body { width: 102rem; margin: 0 auto; font: 400 1.5rem Lato, sans-serif; color: white; backface-visibility: hidden;
}
h1 { margin: 20px 0 0; font: 100 4rem Lato, sans-serif; color: #394046; text-align: center; letter-spacing: 0.25rem; text-transform: uppercase;
}
body > p { margin: 10px 0; text-align: center; color: #9da6af;
}
.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important;
}

Triangle Peeker - Script Codes JS Codes

$(window).load(function() { $("body").removeClass("preload");
});
// I had to do this because the CSS sibling selector is bullshit
$( ".triangle" ).hover( function() { $( this ).siblings().addClass("inactive"); }, function() { $( this ).siblings().removeClass("inactive"); }
);
Triangle Peeker - Script Codes
Triangle Peeker - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 3.5
Size 4,339 Kb
Views 28,336
Do you need developer help for Triangle Peeker?

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!

Derek Wheelden (frxnz) Script Codes
Name
Sliding Tab Box Things
User Listing
Live LESS Compilation
Dumb Triangle Thing
Folding Panels
Off-Screen Mobile Nav
JavaScript Templates
Fantastic Mr. Fox
Google Maps Geolocation Test
File Browser Mockup
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!