Expanding Fullscreen Grid Portfolio

Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.

By in Playground on
Demo Download

Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.

Each item has a little slideshow of thumbs which will be animated to the right position once the portfolio item gets “expanded”. If you know Flipboard for the iPad, then you might recognize this effect we got inspired with.

The beautiful images are by Kyle van Horn, check out his Flickr Photostream.

jQuery Masonry is by David deSandro and you can find it here.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

The HTML for an item in the portfolio is the following:

<div class="item block" data-bgimage="images/1.jpg">
	<div class="thumbs-wrapper">
		<div class="thumbs">
			<img src="images/thumbs/1.jpg"/>
			<img src="images/thumbs/2.jpg"/>
		</div>
	</div>
	<h2 class="title">Personal Works</h2>
	<p class="subline">Concept <span class="fancy">&</span> Design</p>
	<div class="intro">
		<p>
			Some short introduction 
			<a href="#" class="more_link">View project</a>
		</p>
	</div>
	<div class="project-descr">
		<p>A longer description...</p>
	</div>
</div>

We use a jQuery template for the fullscreen structure:

<!-- Fullscreen jQuery template -->
<script id="fullviewTmpl" type="text/x-jquery-tmpl"> 
	{{html bgimage}}
	<div class="full-view">
		<span class="full-view-exit">Exit full screen view</span>
		<div class="header">
			<h2 class="title">${title}</h2>
			<div class="full-nav">
				<span class="full-nav-prev">Previous</span>
				<span class="full-nav-pages">
					<span class="full-nav-current">${current}</span>/
					<span class="full-nav-total">${total}</span>
				</span>
				<span class="full-nav-next">Next</span>
			</div>
			<p class="subline">${subline}</p>
			<span class="loading-small"></span>
		</div>
		<div class="project-descr-full">
			<div class="thumbs-wrapper">
				<div class="thumbs">{{html thumbs}}</div>
			</div>
			<div class="project-descr-full-wrapper">
				<div class="project-descr-full-content">
					{{html description}}
				</div><!-- project-descr-full-content -->
			</div>
		</div><!-- project-descr-full -->
	</div><!-- full-view -->
</script>

When loading the page, we have the initial grid view:

And when we click on “View Project”, the fullscreen mode will be loaded:

We hope you like this little experiment and find it useful!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Creating a Risograph Grain Light Effect in Three.js

Recreating a Dave Whyte Animation in React-Three-Fiber

Hover Motion Intro Animation

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 61

Comments are closed.

  5. That full screen view is sweet! Have you tested this on common browsers/versions?

    Thanks for sharing this gem with us.

  11. This is great. I’d love to implement this for my web portfolio. It’s a really beautiful method to display projects. Thanks for posting!

  12. Hi Mary,

    I love your tutorials; it’s nice to see something different for a change.

    How can I contact you for some freelance / contract work, if you’re still available?

  14. the dynamical grid is perfect for android browser execpt for the fullscreen 🙂

  16. hi mary…. very nice just like the other posts,,, thx for this… do u have a personal site?? i ve been learning a lot with you.. thx..

  17. You guys are the best at codrops!!I’m a graphic designer knowing a few things about coding , but you guys make it so simple for us …yes i have a problem with the math, coding and all this things which made my head bouncing around, but thank you so much, i discovered that jQuery Masonry last week and i was trying to figured out how to make exactly the same template (the fullscreen view is a plus for me)

    By he way, i want to know if i can use your code to do my portfolio?

    Bye

  18. Hi thanks for posting another great piece of jquery, its always great to check out new designs and functionality, like Wilson mentioned above do you have a personal showcase of your work anywhere on the web?

  19. Thank you Mary! Nice work! And Moreno I like your site as well!

  25. Clean, simple and beautiful!
    I will use this idea for abandoned dogs adoption website. Thank you!

  26. Great plugin. Just one request, would it be possible for you to do a version that somehow integrates the history/bbq plugin?

  31. Excellent work! (As always).
    Just a shame, when in full screen mode the thumbnails seem redundant. Be excellent to be able to then click them and they become the background. jQuery newb here 🙁

    Anyone know how to do such? Can’t see it being much of an extension

  35. Nice work ! I use the same technique for my site, err, sandbox. I’ll compare codes, mine is a experimental not optimized mess and i have not implemented any fullscreen mode.

    This will be very useful, thanks a lot.

  36. Nice work. However I find the interface slightly hard to figure out. I think it’s mainly because of the style of the arrows an link to view in full screen.

  37. Hi Mary Lou , please you have to help me!!i can’t figure out how to change color for each “block”, i’m really bad codder .It’s a little bit confusing but i want to use this template as a “blog” so i want to implement different colors on the block for different categories. I ‘m pretty sure you will understand me. As bad codder as i am i tryed really hard do to it by myself, but i guess i’m outta of the ligue!I know its kind of boring for you cause you already made this template for us, but if you can help me on that one please, i will be really thankfull as i have an interview next week and i really want to show them my work this way. Thank you

    –>If anybody else can help too , please feel free to contact me.Thanks

  38. I love this. I think I need to make this into a wordpress theme if it already has not been done.

    Good job!

  39. Hello,

    I love this template! I am just having one problem. I have included captions with each of the expanded images. Sometimes this text doesn’t show and the blocks of text that don’t show change from time to time. But if I nudge the corner to resize the window or go backwards through the images it will appear! I have checked the code over and over and can’t figure out whats happening! I am submitting work for a review this Friday and have to fix this right away! Any help you could offer would be wonderful. Thanks!

  40. ok i have to apologize!!cause i finally got the solution!!it was really simple. I told you i wasn’t good codder. I’m designer but not codder.
    Anyway , i still have to figure out how to apply different size on each block.

    if you have an idea please?

    thanks

  41. @graphical_force

    i’ve converted to html5 wordpress theme already.

    hows your jQuery? there are still things i’d like to tweak.

    fancy collab on getting it finished?

  42. Mary Lou, how easily would this script be modified to make the expanding box stay within a parent width, but expand to the needed height of whatever is loaded into the box? Basically I want to constrain the box expand to 960px and have the height inherit what is in the box when it loads.

  47. Hello and thanks for this fantastic post, it is really great! But i also have the same question as Nikki, is there a way to hide the project description on request? i’ve tried fiddling with jquery but i haven’t coded it before and it doesn’t seem to work 🙁

  49. Hello,

    Nice script ! I try to put it on a page with the jquery function load() but it don’t work. Could you help me ?

    Thanks !
    F.

  50. Hi, this is great material, thx a lot.

    btw, i’m trying to make the text background when clicking view project to semi transparant white which I think it would make it more neat, can you help me with it?