Hey guys, how's it going? My name is Jason Merrill, and I'm the creative director
here at WebTegrity. So no, I'm not Kori and that may disturb some of you guys
but she has asked her team members to make videos to get a little bit more
advanced with WordPress and kind of what is possible within your WordPress
website. So today what I want to do for you guys is show you how to animate
something on your website, just a quick cover over effect, and and I want to do
this because a lot of people get intimidated when it comes to different
animation effects. They feel like they need to get involved with JavaScript or
something like that and it's simply not that complex. So here I have a Catholic
school here in San Antonio, I want to use them as an example, and we'll show you
guys just how easy it is to animate something with a hover over effect. So
here we have, if I hover over the logo here, just a quick little effect. Of
course it links back to the home page but it's just something that adds just a
little bit of engagement and it's little things like this that can make a website
fun. But if I scroll down, some feedback that they gave me is that
if I hover over the Instagram feed it has no animation effect like
there's no way to know that it clicks off this ice little cursor hand. So they
wanted just a quick way to to add a little bit of engagement to this and I
said "no problem" we're gonna do this with literally two lines of CSS. so I'm gonna
inspect it here inside of the Chrome and I'm gonna work inside of the inspector
stylesheet here. Now if you know anything about style sheets you know any change
that I make here I'll need to add to my style sheet on the back end, so please
keep that in mind. This is a great area to play but eventually you need to copy
it and put it in your actual style sheet if you want the changes to be permanent.
But when it comes to any kind of reoccurring element, like a picture area
is a good scenario for a reoccurring element, I like to use unordered lists
because it adds structure that's easy to predict and use within within a style
sheet. But if you set up like maybe you're trying to do this on some
gathering, and you use divs instead of list items, it can work the same way but
what I'm going to do is I'm going to go to this list item. This is kind of
the parent list item that's being used for this image inside of here, and you'll
see I already have some CSS for that. And what I'm gonna do is I'm gonna grab that,
I want to add a hover effect to this so I'm just going to create a new
CSS line inside of this inspector element, and I'm just going to add the
pseudo class of hover to the list item. So this is to say when I hover over this
list item, I want you to activate whatever CSS properties I put within
here and I'm going to put a transform property and I'm going to use the scale
function. Now there's a lot of different things you can do with transform, but I
like scale in this case because I want it to, I just wanted to pop out a
little bit. You can do a lot with transform; you can have it move from side
to side, jump up, there's a lot of different things
that you could do with it. So I'm gonna put the scale at 1.5 just to show you
that you can really make these things explode out, but I think in this case
that's a little bit too large so I'm gonna go with like a 1.1. And there we go,
real subtle but it still doesn't feel like an animation, does it? You hover over
it and it pops out at you and that's great, but in order to get that
transition that animations have, we need to go to the parent class here, and we
just need to add one property. Now we don't add this property onto the hover
effect because then it will only be active when you hover over it and you
want it to ease in and out. So we're gonna add it on this area right here and
we're gonna use the property transition, and we use this all the time, I use this
is like the standard for me. I type "all ease 0.3 seconds" to say I want this
transition to happen when it covers on and off, so I want it to go both ways,
there's different types of transition effects, I'm using ease because I think
it's the best and then I can tell it the
period of time in which it does its transition and 0.3 seconds. Seconds
is like the standard; it's very subtle, not too quick not too slow
and now we have this nice effect here to where it feels like an animation and it
feels like a lot more engaging than it was previously. And we did that with
literally two lines of CSS; it's very simple, nothing to be intimidated about,
and you can add this effect all over the site. And it doesn't just work with transform,
this is also the transition property, is what you should be be putting on
anything that you have changing colors when you hover over it, so you'll notice
this kind of has that nice transition, it's not a sharp jump when you hover
over it. So it's little things like that that really add a lot of spunk to a site
and I hope this video has helped you guys out. Of course remember you're not
done, you want to copy this, put this in your style sheet or since this is
already on my style sheet, I would just grab that last line and make sure that
that is over there as well. So if you guys have any questions with WordPress
for some of you who've been watching Kori for a while and you want to get
more advanced, please let me know in the comment section; I'm happy to hit them up,
either me or one of the other team members, we have a lot of very talented
developers here that I'm sure would love to get as nerdy as you'd like to get
with WordPress. But that's all I have for this video, guys,
thank you so much for watching! Bye!