Clickable Portfolio

Developer
Size
2,037 Kb
Views
46,552

How do I make an clickable portfolio?

What is a clickable portfolio? How do you make a clickable portfolio? This script and codes were developed by Garrett Saiki on 13 July 2022, Wednesday.

Clickable Portfolio Previews

Clickable Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clickable Portfolio</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
* Sample User.GitHub.io Project
https://codepen.io/manikoth/project/editor/AyyddA/
* Atomic Design Process
http://codepen.io/manikoth/pen/RpxjqG
-->
<figure class="gallery"> <a href="#overlay-1"> <img src="http://placehold.it/100x100" alt="Thumbnail" /> </a> <figcaption> <h3>Title</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptatum, minus. Odit laborum autem nemo eius praesentium aliquid porro dolor, laboriosam est quas distinctio nostrum quae harum tempore. Atque, quod! </figcaption> <div class="overlay" id="overlay-1"> <a href=""><img src="http://placehold.it/600x400" alt="Fullsize" /></a> <a href="#" class="close-image">Close &#215;</a> </div>
</figure>
</body>
</html>

Clickable Portfolio - Script Codes CSS Codes

.gallery { background: teal; margin: 0; padding: 1em; width: 12em;
}
.overlay { display: none; background: rgba(0,0,0,.25); position: absolute; height: 100%; width: 100%; top:0; left:0;
}
.overlay:target { display: block; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 50vh; animation: gallery ease 1s;
}
.overlay img { border: 10px solid #000; border-radius: 10px; box-shadow: 0 0 20px #333;
}
@keyframes gallery { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); }
}
Clickable Portfolio - Script Codes
Clickable Portfolio - Script Codes
Home Page Home
Developer Garrett Saiki
Username gsaiki
Uploaded July 13, 2022
Rating 3
Size 2,037 Kb
Views 46,552
Do you need developer help for Clickable Portfolio?

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!

Garrett Saiki (gsaiki) Script Codes
Create amazing art & images 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!