On a website theme I am creating, I have each post show the main content at first then, using CSS, the captions/descriptions and post meta data when you :hover over the post. The post descriptions and meta data should appear in the foreground while the main content fades nicely in the background.

You can get an idea of what I am talking about here. You'll notice, however, that the vimeo player on that page stays in front of the post meta data, unlike the other video embeds.

Right now, I am currently using a javascript function to resize the players based on the whether or not it is a vimeo embed, but that is not the issue. This was happening without the function as well.

I would love to get this working in Safari and Firefox, so that's all I am worried about for right now.

The following CSS is what I use for the post hover functionality:

div.post_content, div.post_info {
    opacity: 1;
    -webkit-transition: opacity .4s linear;
    display: block;

div.post:hover div.post_content {
    display: block;
    opacity:  .7;

div.post:hover div.post_info {
    display: block;
    opacity: .85;

This next bit is what I am using for position and layout of the embeds (objects)... at least YouTube and vimeo's:

div.video_embed {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;

div.video_embed object {
    margin: -60px 0 0 -50px;
    position: absolute;

div.video_embed object[data^="http://vimeo.com/"] {
    margin: 15px 0 0 15px;
    width: 270px;
    height: 165px;
    z-index: -1;

The vimeo player is smaller because, at 270 pixels, it automatically goes to "mini mode" and the single play button looks much better (IMO) without all the extra data on the index page.

Hopefully this makes sense, and I think it will if you view the site, but does anyone have any idea how I can get vimeo embeds to fade to the back, or hide behind the content at all, on :hover?

Any replies/ideas would be greatly, greatly appreciated. Thanks in advance!

PS: I am working on a feature that would let you click a "more" button that would display the content for video posts optionally so the videos could actually be played, but that's not happening now... so yeah, I know you can't play the videos.

2 answers


It looks like something is wrong with the Javascript. I don't think the document is writing the object. Check around function setupVideo(player, color, width) in http://tumblr.manasto.info/themes/photorific/scripts/photorific.js

Answered over 9 years ago by Tim Wood

There may have been a problem with that javascript file earlier. I've been messing with it a bunch lately.

However, if you're pointing out that the javasrcipt file is not actually creating the object, then you're right. It just takes in the string that would be the "object", fiddles with some params, then writes the new string. This is the most effective way to do it on Tumblr, which only let's you output the code by only affecting it's width.

I hope it's not, but I think the real issue has something to do with Windows or the Windows version of the Flash plugin. The implementation I am looking for works fine in the Mac Browsers, but everything goes haywire in their Window's counterparts.

In fact, I am almost positive that one of the two reasons above is why this is not working.

Thanks for the reply, BTW. If you have any other ideas, do let me know. Maybe I should post more code or something.... I don't know.

Answered over 9 years ago by bschaeffer