jQuery and AJAX Tutorials 23 | Styling the Frame Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Ilias and
welcome to your twenty-third tutorial on
jQuery and in the previous tutorials we
created this portfolio user interface
and we added this overlay and frame but
right now currently we don't see any
frame it's the only large picture here
hmm
so we don't want this picture to be that
large and we want to see the frame so
just go ahead and write some CSS code in
order to see that so we have an image
inside of this frame div element right
here and we are going to style this
image element so we can use jQuery to I
mean the CSS lectures to grab this image
which is inside of this frame and what
we are going to do we let's see how how
large the frame is the frame has width
of 700 pixels and let's set the image
frame to 660 pixels so that we have like
20 pixels on the left and 20 pixels on
the right a wide space and we don't need
to set the height because the height
should be calculated automatically and
let's take a look so now we have this
image but it's not centered yet so what
I'm going to do I'm just going to add
margin left on target of 20 pixels so
just basically move the picture 20
pixels to the right and now we have
equal borders on the left on the right
but there's something we're missing we
want to have a border on the top and on
the bottom as well so we'll just add in
some internal space to this frame by
using padding so just say padding top
should be 20 pixels and padding bottom
should be 20 pixels and now we have a
perfectly done frame but I there is
something I still don't like about this
frame I want to have a space between the
header and the frame and we can use it
by we can make do
by using margin-top I'll just say 15
pixels and now we have our frame is like
perfectly in the center of the page and
we have this border and stuff so and the
next thing I want to do and we are going
to use jQuery for this part when we
click on the on the overlay in this
black overlay we want this picture to
disappear and go back to the normal
state so let's create a selector we can
actually just copy this code but I will
write it so that we work so that we walk
through it very slowly and you guys can
follow along so when we click on the
orbit overlay I'll just add the this
click event function we want the
following things to happen we want this
overlay to disappear first so I'll just
say overlay or I can use this lecture as
well because this selector will refer to
the element which is clicked and this
case is overlay so we can say this fade
out so you can fade out the overlay and
we want to fade out the frame so just
select the frame and say fade out so
goodbye frame yep so now we are we're
done and now let's just see what's going
to happen we open the image and then we
click on the overlay and magic it works
and so now we can browse these pictures
in a very nice and fancy way and so but
there is something I want to ask this
this portfolio I want to to change the
cursor to the pointer so so you know in
HTML if you are hover over a link it is
arrow transfers to a hand and so the
user knows that this thing is clickable
right now it does look like it's
clickable so you can go to our CSS
and we can copy the selector of
portfolio a list image and then you put
a column and say however and what means
that means that this selector will work
we when we hover hover over this element
and you can say cursor:pointer and the
same for the overlay overlay power
course or pointer and the same for the
frame image so frame image hover course
or pointer now let's just gonna happen
we hover over it and we see this hand
and we when you go to the frame we don't
see the hand and when we go right here
with it the hand and when we click to
the overlay well overlay doesn't it
doesn't work for some reason um I'll
just try like this overlay yep now
overlay works as well so this is
something what we want to do in this
tutorial and this next tutorial we want
to add the feature so that you can
scroll between the images so we will
create and like little arrows on the
right and on the left which will appear
when you hover over a certain area here
and we can also create a feature of
displaying some text or some description
below alright guys thanks for watching I
hope you learn new stuff and I'll see
you guys in the 24th tutorial