Transcript

00:10 hey everybody Joe here and I am really
00:12 excited to introduce you to popup
00:14 caption version 4 now the original
00:17 version was published as like fancy
00:19 image popup like back in
00:22 2012 so many many years ago and I've
00:26 released three major updates to it um
00:29 and all of them more free upgrades this
00:31 version though is the first time we've
00:33 actually had a paid upgrade to pop
00:34 caption and it is amazing um a few weeks
00:38 ago I did a live stream on how to do
00:42 text on top of images and um I showed
00:45 popup caption and it just fell short and
00:48 felt like it could use a complete revamp
00:51 so I scrapped the current version
00:54 completely rerro it from scratch and
00:56 here we have pop-up caption version
40:59 let's go ahead and Jump On In and show
01:00 you some of the amazing features of this
01:02 new stack so first off let's dive in and
01:06 look at some of the amazing features
01:07 that we have and some of the cool
01:09 animations that we have directly on the
01:11 web page now we've done something new
01:14 for this demo where we actually give you
01:16 the ability to control the settings of
01:18 the demo um so you can actually play
01:21 around with all the various options that
01:23 pop-up caption has now by default it's
01:26 pretty cool it has this really amazing
01:29 swing animation
01:30 when you hover over an image the caption
01:33 swings over and it actually follows your
01:36 mouse so as you see as I'm going around
01:38 this grid the caption actually follows
01:41 my mouse even though the captions are
01:43 different for every single image really
01:45 really cool let's look at some of the
01:47 other uh animations that we have
01:49 available so let's go ahead and we have
01:50 a slide animation so as you see this
01:53 this is it slides between each
01:56 image we have a rotate
02:02 and there's some different ones I'm not
02:03 going to go through each one here we
02:04 have a flip
02:08 animation we also have the ability for
02:11 slide you can actually push the image
02:13 out of the way right so it kind of give
02:15 it a different sort of slide animation
02:17 where the background image instead of
02:18 overlaying it actually pushes it out of
02:21 the way and last but not least we can
02:22 actually have the captions on by default
02:25 and then when you hover over the caption
02:27 will animate out
02:30 now that's not everything right you'll
02:31 notice that in this demo we actually
02:33 have the ability to apply a blur and
02:35 saturation um to our image let's go
02:38 ahead and apply a blur to
02:41 this and what you'll notice uh when I
02:43 applied a 10 pixel blur is not only did
02:47 the overlay uh stay there but the actual
02:50 image behind it is blurred um this is
02:53 great for to really make the text Pop
02:55 cuz sometimes your images can kind of
02:57 distract from reading the text so this
02:59 really really gives you uh the ability
03:01 to um still see the image in the
03:04 background but make the text much easier
03:06 to read and in this particular example
03:09 you'll see that actually the images
03:11 themselves are actually not blurred it's
03:13 only the overlay that's blurring
03:15 it and for effect I'm just going to set
03:18 the saturation to zero and blur to zero
03:21 so that way what we can see is when the
03:23 overlay is covering the image it
03:25 actually desaturates it when you set it
03:27 to zero it basically makes it a black
03:28 and white image
03:30 but we have all the entire Spectrum um
03:32 in between from 0 to 100% so if we
03:35 choose
03:35 50% okay we'll see that when we choose
03:38 that there's still color bleeding
03:41 through but it it basically desaturates
03:45 the colors so that maybe the text will
03:47 be easier to read now also on this demo
03:50 I had some fun with Foundation
63:52 swatches um to kind of show you some
03:54 things that you can do and how flexible
03:56 pop-up caption is to be styled with
03:58 Foundation swatch
04:00 Foundation is not required for this
04:02 stack but if you have the swatches it
04:04 just gives you extra flexibility because
04:06 you can use all the powers of foundation
04:08 to uh manipulate the
04:10 stack now I should note that pop-up
04:12 caption actually not only supports
04:14 images but you can also put in videos in
04:16 here as well and the video will autoplay
04:18 in the background and even still when
04:21 the overlay happens you will see the
04:23 video playing in the background this can
04:25 add a very interesting um interactive
04:27 element to your web pages
04:30 now pop-up caption is super easy to use
04:32 we're not going to do a full how-to here
04:34 but just I just want to show you kind of
04:36 what you're getting when you purchase
04:38 the pop-up caption stack is allows you
04:41 to create a single instance that you can
04:43 actually go ahead and create and
04:45 integrate with your existing
04:48 layouts and then we have popup grid and
04:51 pop-up grid allows you to easily create
04:55 uh grids of pop-up captions this is the
04:57 kind of demo that we looked at earlier
05:00 so if you want a more in-depth uh
05:02 discussion on how to implement pop-up
05:03 caption make sure you go check out those
05:05 video tutorials but as you can see it's
05:08 really easy to implement um the settings
05:10 give you exactly what you need um and
05:13 it's super powerful it also integrates
05:15 with total CMS feeds and a lot of other
05:18 content generation stacks and uh yeah it
05:21 is amazing stack I hope you have fun
05:23 with it make sure that you share what
05:25 you build with it on the community and
05:26 go forth and make your websites great
05:28 bye
05:31 oh