Home/ Questions/Q 3217834
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T15:27:27+00:00

I have a sliding boxcaption and it works fine. But when you first view

  • 0

I have a sliding boxcaption and it works fine. But when you first view it has the box caption over it and then when you mouse over it works properly but it starts off with the caption on top. And I want the box caption only to show when the user mouses over the box. I cant figure out why it does that. It’s kind of odd.

Take a look at it here so you can see what I am talking about.

http://ironbulldog.com/windows/test.html

Below is my source code. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing</title>
<style type="text/css">

    *{ padding:0px; margin:0px; }
    body{ background:#D5DEE7; }
    a{ color:#C8DCE5; }
    h3{ margin: 190px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }

    .boxgrid{ 
        width: 325px; 
        height: 260px; 
        margin:10px; 
        float:left; 
        background:#161613; 
        border: solid 2px #8399AF; 
        overflow: hidden; 
        position: relative; 
    }
        .boxgrid img{ 
            position: absolute; 
            top: 0; 
            left: 0; 
            border: 0; 
        }
        .boxgrid p{ 
            padding: 0px 10px; 
            color:#afafaf; 
            font-weight:bold; 
            font:10pt "Lucida Grande", Arial, sans-serif; 
        }

    .boxcaption{ 
        float: left; 
        position: absolute; 
        background: #000; 
        height: 260px; 
        width: 100%; 
        opacity: .8; 
        /* For IE 5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        /* For IE 8 */
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }

</style>

<script type="text/javascript" src="http://www.microsoft.com/library/shared/jquery/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
        //Vertical Sliding
        $('.boxgrid.slidedown').hover(function(){
            $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
        }, function() {
            $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
        });

        //Header Text Comes in Later
        $('.boxgrid.slidedown').hover(function(){
            $(".delay", this).stop().animate({top:'0px'},{queue:false,duration:500});
        }, function() {
            $(".delay", this).stop().animate({top:'260px'},{queue:false,duration:500});
        });
    });
</script>

</head>

<body>        
    <div class="boxgrid slidedown">
        <img src="jareck.jpg"/>
        <div class="cover boxcaption">
            <div class="delay boxcaption">
            <h3>The Nonsense Society</h3>
            </div>
    </div>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add this line to your css

    .boxcaption.cover   { top: 260px; }
    • 0