Expanding Tiles

Developer
Chung Man Chau
Size
3,932 Kb
Views
6,072
  1. Expanding Tiles Previews
  2. Expanding Tiles HTML Codes
  3. Expanding Tiles CSS Codes
  4. Expanding Tiles JS Codes

How do I make an expanding tiles?

What is a expanding tiles? How do you make a expanding tiles? This script and codes were developed by Chung Man Chau on 15 January 2023, Sunday.

Expanding Tiles Previews
IQ Test

Expanding Tiles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Expanding Tiles</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div class="color">	<div class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></div>	<h2 class="title">First</h2>	<ul class="content">	<h2>First</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, maxime cum est. Expedita in consequuntur, incidunt placeat ut officiis earum suscipit rem fuga porro deserunt labore fugiat iste delectus accusantium soluta enim fugit modi voluptas, perferendis amet vel asperiores possimus. Aliquid assumenda quasi voluptate explicabo architecto, vero sit repellendus nobis?</p>	</ul>	<span class="toggle-btn">Expand</span>	</div>	<div class="color">	<div class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></div>	<h2 class="title">Second</h2>	<ul class="content">	<h2>Second</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, maxime cum est. Expedita in consequuntur, incidunt placeat ut officiis earum suscipit rem fuga porro deserunt labore fugiat iste delectus accusantium soluta enim fugit modi voluptas, perferendis amet vel asperiores possimus. Aliquid assumenda quasi voluptate explicabo architecto, vero sit repellendus nobis?</p>	</ul>	<span class="toggle-btn">Expand</span>	</div>	<div class="color">	<div class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></div>	<h2 class="title">Third</h2>	<ul class="content">	<h2>Third</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, maxime cum est. Expedita in consequuntur, incidunt placeat ut officiis earum suscipit rem fuga porro deserunt labore fugiat iste delectus accusantium soluta enim fugit modi voluptas, perferendis amet vel asperiores possimus. Aliquid assumenda quasi voluptate explicabo architecto, vero sit repellendus nobis?</p>	</ul>	<span class="toggle-btn">Expand</span>	</div>	<div class="color">	<div class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></div>	<h2 class="title">Fourth</h2>	<ul class="content">	<h2>Fourth</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, maxime cum est. Expedita in consequuntur, incidunt placeat ut officiis earum suscipit rem fuga porro deserunt labore fugiat iste delectus accusantium soluta enim fugit modi voluptas, perferendis amet vel asperiores possimus. Aliquid assumenda quasi voluptate explicabo architecto, vero sit repellendus nobis?</p>	</ul>	<span class="toggle-btn">Expand</span>	</div>	<div class="color">	<div class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></div>	<h2 class="title">Fifth</h2>	<ul class="content">	<h2>Fifth</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, maxime cum est. Expedita in consequuntur, incidunt placeat ut officiis earum suscipit rem fuga porro deserunt labore fugiat iste delectus accusantium soluta enim fugit modi voluptas, perferendis amet vel asperiores possimus. Aliquid assumenda quasi voluptate explicabo architecto, vero sit repellendus nobis?</p>	</ul>	<span class="toggle-btn">Expand</span>	</div>	<div class="color">	<div class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></div>	<h2 class="title">Sixth</h2>	<ul class="content">	<h2>Sixth</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, maxime cum est. Expedita in consequuntur, incidunt placeat ut officiis earum suscipit rem fuga porro deserunt labore fugiat iste delectus accusantium soluta enim fugit modi voluptas, perferendis amet vel asperiores possimus. Aliquid assumenda quasi voluptate explicabo architecto, vero sit repellendus nobis?</p>	</ul>	<span class="toggle-btn">Expand</span>	</div>	</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Expanding Tiles - Script Codes CSS Codes

body { font-family: 'Open Sans', sans-serif; margin: 0;
}
.wrapper { display: flex; flex-direction: row; height: 100vh;
}
.color { position: relative; display: flex; overflow: hidden; flex-direction: column; transition: flex-basis .5s ease-in-out; text-align: center; color: #fff; box-shadow: 0 0 30px #424242; align-items: center; justify-content: center; flex: 1 0 0;
}
.color:nth-child(1) { background: #245a75;
}
.color:nth-child(1):hover .toggle-btn:hover { color: #245a75;
}
.color:nth-child(2) { background: #5fbfbf;
}
.color:nth-child(2):hover .toggle-btn:hover { color: #5fbfbf;
}
.color:nth-child(3) { background: #24753f;
}
.color:nth-child(3):hover .toggle-btn:hover { color: #24753f;
}
.color:nth-child(4) { background: #f5b83d;
}
.color:nth-child(4):hover .toggle-btn:hover { color: #f5b83d;
}
.color:nth-child(5) { background: #f24a4a;
}
.color:nth-child(5):hover .toggle-btn:hover { color: #f24a4a;
}
.color:nth-child(6) { background: #8b4b8b;
}
.color:nth-child(6):hover .toggle-btn:hover { color: #8b4b8b;
}
.color:before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; content: ''; transition: all .4s ease-out; transform: skew(45deg) scale(1) translate(0, 0); opacity: .05; background: #fff;
}
.color:hover { flex-basis: 15vw;
}
.color:hover:before { transform: skew(45deg) scale(1.5) translate(0, 0);
}
.color:hover .toggle-btn { opacity: 1;
}
.color:hover .toggle-btn:hover { background: #fff;
}
.color.active { flex-basis: 100vw;
}
.color.active:hover:before { transform: skew(45deg) scale(1) translate(0, 0);
}
.color.active .close-btn { opacity: 1; visibility: visible;
}
.color.active .title { transform: translateY(-100%); opacity: 0;
}
.color.active .toggle-btn { opacity: 0;
}
.color.active .content { transition: all .4s ease-in-out .2s; transition-delay: 0; transform: translate(-50%, -50%) scale(1); opacity: 1;
}
.color:nth-child(even):before { transform: skew(-45deg) scale(1) translate(0, 0);
}
.color:nth-child(even):hover:before { transform: skew(-45deg) scale(1) translate(0, 0);
}
.color:nth-child(even).active:hover:before { transform: skew(-45deg) scale(1) translate(0, 0);
}
.color .close-btn { visibility: hidden; opacity: 0; position: absolute; right: 40px; top: 20px; font-size: 2rem; transition: opacity .4s ease-in-out; cursor: pointer; z-index: 1;
}
.color .title { font-size: 2rem; font-weight: 600; transition: .5s all ease-in-out;
}
.color .content { position: absolute; z-index: 1; top: 50%; left: 50%; display: flex; flex-direction: column; width: 70%; margin: 0; padding: 0; list-style: none; transition: all .2s ease-in-out; transform: translate(-50%, 50%) scale(0.5); opacity: 0; align-items: center;
}
.color .toggle-btn { font-size: .8rem; position: relative; z-index: 2; display: block; width: 3rem; padding: 8px 25px; cursor: pointer; transition: all .5s ease; text-align: center; opacity: 0; border: 1px solid #fff;
}

Expanding Tiles - Script Codes JS Codes

$('.toggle-btn, .close-btn').click(function(){	$(this).parent().toggleClass('active');
});
Expanding Tiles - Script Codes
Expanding Tiles - Script Codes
Home Page Home
Developer Chung Man Chau
Username chungman93
Uploaded January 15, 2023
Rating 3
Size 3,932 Kb
Views 6,072
Do you need developer help for Expanding Tiles?

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!

Chung Man Chau (chungman93) Script Codes
Name
Calendar Mock Up
Opening Menu Concept
Holy Grail Layout - CSS Grid
Delete Hover
Menu Transformation
Hover Underlining
Responsive CSS Grid
Animated Gradient Text
Google Plus Button
BBC Beta - Grid
Create amazing love letters 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!