Pageful Catalogue

Developer
Moses Holmström
Size
2,875 Kb
Views
34,408
  1. Pageful Catalogue Previews
  2. Pageful Catalogue HTML Codes
  3. Pageful Catalogue CSS Codes
  4. Pageful Catalogue JS Codes

How do I make an pageful catalogue?

Testing out an idea for a product gallery. What is a pageful catalogue? How do you make a pageful catalogue? This script and codes were developed by Moses Holmström on 16 October 2022, Sunday.

Pageful Catalogue Previews
IQ Test

Pageful Catalogue - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pageful Catalogue</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="gallery"> <li class="gallery--item"> <img src="//46.101.190.45:8000/yt/1.jpg" alt="" /> <h3>Malli #1</h3> </li> <li class="gallery--item"> <img src="//46.101.190.45:8000/yt/2.jpg" alt="" /> <h3>Malli #2</h3> </li> <li class="gallery--item"> <img src="//46.101.190.45:8000/yt/3.jpg" alt="" /> <h3>Malli #3</h3> </li> <li class="gallery--item"> <img src="//46.101.190.45:8000/yt/4.jpg" alt="" /> <h3>Malli #4</h3> </li> <li class="gallery--item"> <img src="//46.101.190.45:8000/yt/5.jpg" alt="" /> <h3>Malli #5</h3> </li> <li class="gallery--item"> <img src="//46.101.190.45:8000/yt/6.jpg" alt="" /> <h3>Malli #6</h3> </li> <li class="gallery--item"> <img src="//46.101.190.45:8000/yt/7.jpg" alt="" /> <h3>Malli #7</h3> </li> <li class="gallery--item"> <img src="//46.101.190.45:8000/yt/8.png" alt="" /> <h3>Malli #8</h3> </li> <li class="gallery--item"> <img src="//46.101.190.45:8000/yt/9.jpg" alt="" /> <h3>Malli #9</h3> </li> <li class="gallery--item"> <img src="//46.101.190.45:8000/yt/1.jpg" alt="" /> <h3>Malli #10</h3> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pageful Catalogue - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background-color: lightgray;
}
.gallery { list-style-type: none; margin: 0; bottom: 0; padding: 0; font-size: 0; height: 33%; width: 100%; white-space: nowrap; overflow: hidden; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; position: absolute;
}
.gallery--item { box-shadow: -0.2rem 0 1rem 0.25rem rgba(0, 0, 0, 0.3); font-size: 1rem; display: inline-block; position: relative; overflow: hidden; height: 100%; width: 10%; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out;
}
.gallery.hover { height: 75%;
}
.gallery.hover .gallery--item { width: 5%;
}
.gallery.hover .gallery--item.hover { padding: 1.5rem; width: 55%; z-index: 1;
}
.gallery.hover .gallery--item.hover img { height: calc(100% - 3rem);
}
.gallery.hover .gallery--item.hover h3 { background-color: transparent;
}
.gallery--item { overflow: hidden; background-color: white;
}
.gallery--item img { position: absolute; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; height: 100%; width: auto;
}
.gallery--item h3 { background-color: white; position: absolute; color: black; font-size: 1rem; font-weight: 100; top: 0; right: 0; left: 0; margin: 0 auto; padding: .25em .5em; text-align: right; text-shadow: 0 0.05em 0.1em white; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out;
}

Pageful Catalogue - Script Codes JS Codes

console.clear();
$(function() { var $g = $(".gallery, .gallery--item"); var $gi = $(".gallery--item"); //* $g.hover(function(evt) { $(this).addClass("hover"); }, function (evt) { $(this).removeClass("hover"); }); //*/ //* $gi.click(function(evt) { $(".hover").removeClass("hover"); $(".gallery").addClass("hover"); $(this).addClass("hover"); }); //*/
});
Pageful Catalogue - Script Codes
Pageful Catalogue - Script Codes
Home Page Home
Developer Moses Holmström
Username thykka
Uploaded October 16, 2022
Rating 3
Size 2,875 Kb
Views 34,408
Do you need developer help for Pageful Catalogue?

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!

Moses Holmström (thykka) Script Codes
Name
Random word highlight script
Loader - Connect the dots
Fallout Slides
Strange sphere thing
Orbit Loader
Thing
Animated Unlock Tutorial
Freaky Shadow Effect
Firework
I long for quaternions....
Create amazing web 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!