Join Chris Converse for an in-depth discussion in this video Updating the CSS to prepare for animated captions, part of Creating Animated Rollovers with jQuery.
Now look at this project in its current state let's come under the Commands menu.…Let's go to HTML>Open Document in Default Browser which is Command+Shift+P or…Ctrl+Shift+P in Windows and inside of our browser we can see our icons here and…we can see the captions with their caption background and as I rollover this I…can see, I get just the border highlighted.…Again, this is exactly the state of the thumbnails in the previous course…creating an attractive gallery with jQuery.…So at this point let's switch back to Aptana Studio.…
Let's open of the includes directory.…Let's open up video_gallery.css and let start making some of our CSS changes.…So to start let's come down to a.videoLink div.caption.…These are the captions that are showing up inside of the anchor tags with…the videoLink class.…First thing we want to do is come in here and change 180 to 165.…Next we want to come over here to the padding and set top to 20, we want to set…the right to 20, bottom to 15, left to 15.…
We want to come down and set the bottom property here change that to top and…
Take a look at the finished web site here.
- Updating the CSS to prepare for animated captions
- Adding the jQuery hover statement
- Animating the thumbnail filmstrip backgrounds