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