Triangle Image Gallery

Developer

Size

2,216 Kb

Views

16,192

Triangle Image Gallery Previews
Triangle Image Gallery HTML Codes
Triangle Image Gallery CSS Codes

How do I make an triangle image gallery?

What is a triangle image gallery? How do you make a triangle image gallery? This script and codes were developed by Colt Borg on 21 November 2022, Monday.

Triangle Image Gallery Previews

Triangle Image Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Triangle Image Gallery</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container row-1"> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/forgot-about-you.jpg" alt="Forgot About You" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/death.jpg" alt="Death" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/crab-city.jpg" alt="Crab City" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/cmykreep.jpg" alt="CMYKreep" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/clown.jpg" alt="Clown" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/forgot-about-you.jpg" alt="Forgot About You" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/sleazy.jpg" alt="Sleazy" /> </div> </div>
</div>
<div class="container row-2"> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/forgot-about-you.jpg" alt="Forgot About You" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/death.jpg" alt="Death" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/crab-city.jpg" alt="Crab City" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/cmykreep.jpg" alt="CMYKreep" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/clown.jpg" alt="Clown" /> </div> </div>
</div>
<div class="container row-3"> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/forgot-about-you.jpg" alt="Forgot About You" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/death.jpg" alt="Death" /> </div> </div> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/crab-city.jpg" alt="Crab City" /> </div> </div>
</div>
<div class="container row-4"> <div class="wrap"> <div class="crop"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/forgot-about-you.jpg" alt="Forgot About You" /> </div> </div>
</div>
<div class="container"> <div class="box-wrapper"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269005/death.jpg" alt="Death" /> </div>
</div>
</body>
</html>

Triangle Image Gallery - Script Codes CSS Codes

/*
* Color Guide
* https://coolors.co/605b56-837a75-acc18a-dafeb7-f2fbe0
*/
body { margin-top: 10em; background: #605B56;
}
.container { margin: 0 auto; /*140px auto 0*/ font-size: 0; max-width: 560px; background: #837A75; text-align: center;
}
.wrap { -webkit-transform: rotate(45deg) translate3d(0, 0, 0); -moz-transform: rotate(45deg) translate3d(0, 0, 0); -ms-transform: rotate(45deg) translate3d(0, 0, 0); -o-transform: rotate(45deg) translate3d(0, 0, 0); transform: rotate(45deg) translate3d(0, 0, 0); display: inline-block;
/* -webkit-transition: -webkit-transform 300ms ease-out; -moz-transition: -moz-transform 300ms ease-out; transition: transform 300ms ease-out;*/ width: 100px;
}
.wrap:nth-child(odd) { width: 40px; -webkit-transform: rotate(225deg) translate3d(30px, 120px, 0); -moz-transform: rotate(225deg) translate3d(30px, 120px, 0); -ms-transform: rotate(225deg) translate3d(30px, 120px, 0); -o-transform: rotate(225deg) translate3d(30px, 120px, 0); transform: rotate(225deg) translate3d(30px, 120px, 0);
}
.wrap:nth-child(odd) .crop img { -webkit-transform: skew(-20deg, -20deg) rotate(-225deg); -moz-transform: skew(-20deg, -20deg) rotate(-225deg); -ms-transform: skew(-20deg, -20deg) rotate(-225deg); -o-transform: skew(-20deg, -20deg) rotate(-225deg); transform: skew(-20deg, -20deg) rotate(-225deg);
}
.crop { position: relative; width: 160px; height: 160px; margin: 0; display: block; overflow: hidden; -webkit-transform: skew(20deg, 20deg) translate3d(0, 0, 0); -moz-transform: skew(20deg, 20deg) translate3d(0, 0, 0); -ms-transform: skew(20deg, 20deg) translate3d(0, 0, 0); -o-transform: skew(20deg, 20deg) translate3d(0, 0, 0); transform: skew(20deg, 20deg) translate3d(0, 0, 0);
}
.crop img { width: 160px; height: 160px; position: absolute; left: -50%; margin-top: 40px; /*36px;*/ margin-left: 40px; /*36px;*/ top: -50%; -webkit-transform: skew(-20deg, -20deg) rotate(-45deg); -moz-transform: skew(-20deg, -20deg) rotate(-45deg); -ms-transform: skew(-20deg, -20deg) rotate(-45deg); -o-transform: skew(-20deg, -20deg) rotate(-45deg); transform: skew(-20deg, -20deg) rotate(-45deg); opacity: 1; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out;
}
.box-wrapper { margin: 0 auto; width: 160px; height: 160px; overflow: hidden; transition: all .4s ease;
}
.box-wrapper img { transition: all .4s ease;
}
.box-wrapper:hover { transform: scale(2,1);
}

Home Page	Home
Developer	Colt Borg
Username	legendofcolt
Uploaded	November 21, 2022
Rating	3
Size	2,216 Kb
Views	16,192

Do you need developer help for Triangle Image Gallery?

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!

Colt Borg (legendofcolt) Script Codes

Name	Size
Bootstrap Layout Help	2,044 Kb
Big Half Circle Seperator	1,918 Kb
CSS Compare - Tachyons	1,514 Kb
Quote Footer	2,553 Kb
Live CSS Clock	3,364 Kb
Full Width Gallery	2,334 Kb
Vertical Rhythm with H.G. Wells	4,676 Kb
Text-fill-color	2,790 Kb
Palantir Support HTML	3,061 Kb
Dynamic Point Mesh Animation Exercise	3,302 Kb

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!

Similar Scripts & Codes

Name	Username	Size
SVG hamburger menu button	Elifitch	2,602 Kb
Pure CSS albums gallery	Renaudtertrais	2,978 Kb
TigerWoods Freecodecamp Page	Baileytj	2,869 Kb
Touch Carousel - last, no gaps.	Berkin	4,332 Kb
This in constructor context	_shree33	1,718 Kb
Monochrome Form	AlienPiglet	3,096 Kb
3D-box	Parthviroja	2,346 Kb
Portfolio Page	KaylaMT	1,983 Kb
Resize image	Happyhj	1,892 Kb
HTML5 Video Autoplay	Zivcos	1,352 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!