Video thumb CSS for rollover shadow

[jamiewalden 1]

Hey guys, I'm trying to place some thumbnails that link to videos and i really like how it's done on the pageslines site (particularly the demo image links). What would i do to replicate that dropshadow effect upon rolling over a thumb? Also, i'd like the video to appear in a lightbox, any suggestions on plugins or ways to make that happen. Thanks in advance for you guidance. I appreciate it. Here's a link to the site, but i don't have anything started on the videos: http://blogstage.americandatanetwork.com

[catrina 103]

Where are these thumbnails you mention (I can't seem to find them - or I'm just looking at the wrong thing)? There is a Lightbox type plugin for videos called Shadowbox: http://wordpress.org/extend/plugins/shadowbox-js/

[jamiewalden 1]

They are on the Pagelines homepage. They are the Platform Pro links on the left that say "Watch the Video" and "View the Demo." http://www.pagelines.com/

[jamiewalden 1]

I'll also need to know how to place images horizontally like that as i'm not much of a coder. Thanks.

[catrina 103]

The CSS property used to create the shadow is: [code]box-shadow: 0 1px 3px #DDDDDD;[/code] Which images on your site do you plan on applying this effect to?

[jamiewalden 1]

I haven't put them on there yet. Is this the CSS class (?) i should create for the shadow to appear on rollover? Thanks, Catrina, for your help. I very much appreciate it.

[Jenny 33]

The code @catrina mentioned above goes into your Custom Code -> Custom CSS box.

[jamiewalden 1]

Ok, I got the shadow and hover shadow working. Now how would i align images and text horizontally like is done on the Pagelines.com homepage so that it's Image Text Image Text. That make sense?

[catrina 103]

Are you referring to the smaller screenshots of themes displayed at the bottom of the Pagelines homepage?

[jamiewalden 1]

No, the one's featured here in this image: http://blogstage.americandatanetwork.com/wp-content/uploads/2011/11/Screen-shot-2011-10-31-at-11.13.49-PM.png

[Danny+ 1,327]

Hi Jamie, You should use firebug and see how the code is structed. That way you get the general idea and you can see the CSS used too.

[jamiewalden 1]

I use Inspect Element on Chrome. Is that the same? Problem is, I don't know completely what I'm looking at as i'm not a coder. :|

[Rob 547]

I suspect that it's something like the coding we have for that demo link: [code].demo-link:hover img { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #DDDDDD #AAAAAA #AAAAAA #DDDDDD; border-style: solid; border-width: 1px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }[/code] Again, I'm not sure this is what you're looking for. But it's the CSS for the hover action on that thumbnail.