Question

Background

I’m customising a tumblr theme (Source: hasaportfolio), and I am trying to change the size of one particular element.

This element, on :hover, is meant to transition opacity – “fade in”. What is happening, however, is that once I change the pixel sizes the transitions refuse to work, and the newly appearing content does not appear at all.

HTML Code

The HTML code this is being applied to is as follows. I’ve commented it as well as I can.

<div class="post video featured"> <!-- wrapper, no css attached -->

    <div class="box-featured">

        <iframe src="http://player.vimeo.com/video/30284533" width="750" height="430" frameborder="0"></iframe>

        <div class="box-caption-text-featured"> <!-- this div and content is "hidden" (0% opacity) until :hover -->

            <h1>Paint</h1>
            <p>I hate yogurt. It's just stuff with bits in.</p>
            <p>You know how I sometimes have really brilliant ideas? You've swallowed a planet!</p>

        </div><!-- box-caption-text-featured -->

        <a href="#" class="box-caption-featured">#</a> <!-- this a is the "trigger" for the transition. Normally it would link to the post permalink -->

    </div><!-- box-featured -->

</div><!-- post -->

I also have another copy of this code, the only difference is that it is without the -featured at the end of each class definition. This is so I can see if the code works at its ‘original’ size (which it does).

CSS Code

The original code for running these boxes follows:

.box { float:left; width:250px; height:130px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption, { width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:transparent; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text { color:#fff; width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }

My changed code is as follows. The only things I have changed are the width and height pixel values.

.box-featured { float:left; width:750px; height:430px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption-featured { width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:#f00; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text-featured { color:#fff; width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption-featured { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text-featured { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }

Have I just missed something dumb, or is there an issue in this code that prevents what I’m trying to do?

Example Page

There’s an example of what I’m taking about over here.

Answer 1

What i’m thinking at this point is that you need to change it to:

.box-featured:hover