Question

I have somehow managed to get almost everything working. But the button in box 3 is not showing immediately and it even -when you mouse over on it- goes a little bit up. How to fix this I had searched and tweaked the whole day for the solution.

Here is the fiddle link:

Mouse over:
https://i.stack.imgur.com/mrLVy.png

HTML Code:

<br /><br /><br /><br /><br />

<div class="box image1">1</div>
<div class="box image1">2</div>
<div class="box image3"><a class='fb_iframe' href="./">
<div align="center">


<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<div id="btn">
    <span class="plus">OPDRACHT PLAATSEN</span>
</div>

CSS Code:
body {

margin:50px 0px; padding:0px;
    text-align:center;

  background-color: white;
}

.box {
  background-color: none;
  width: 200px;
  height: 400px;
  float: left;
  border: 1px solid lightgrey;
  margin: 10px;
}

.image1 {
  background-image:url("http://www.gravatar.com/avatar/8ce7045aad4528bbed3d19fe030c8d85?s=32&d=identicon&r=PG");
}

.image2 {
  background-image:url("http://www.gravatar.com/avatar/8ce7045aad4528bbed3d19fe030c8d85?s=32&d=identicon&r=PG");
}

.image3 {
  background-image:url("http://www.gravatar.com/avatar/8ce7045aad4528bbed3d19fe030c8d85?s=32&d=identicon&r=PG");
}


.box:hover{
  width: 250px;
  /* This is 52px total. 1/2 of that is for top and the other half is for bottom. */
  height: 452px;
  /* Below we are not using -26px for margin-top because .box has 6px border and 10px margin. */
  /* That 16px is then divide by 2 since it's for both top and bottom, or 8px per side. */
  /* Having said that, 26px - 8px is 18px. We need negative value to position it correctly. */
  margin-top: -18px;
 -moz-box-shadow:    0 0 50px black;
 -webkit-box-shadow: 0 0 50px black;
 box-shadow:         0 0 50px black;    
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

    height: 100%;
    font-family: 'Open Sans', sans-serif;
}

    height: 100%;
    color: #fff;
    background: #505050;
    background-attachment: fixed;
    background: -webkit-gradient(linear, top, bottom, from(#09465d), to(#0f536e));
    background: -webkit-linear-gradient( 90deg, #09465d, #0f536e);
    background: -moz-linear-gradient(    90deg, #09465d, #0f536e);
    background: linear-gradient(         90deg, #09465d, #0f536e);
}

#btn {
    font-size: 13px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.9);
    margin: 20px;
    background: -webkit-gradient(linear, top, bottom, from(#1d4763), to(#215f86));
    background: -webkit-linear-gradient( 90deg, #1d4763, #215f86);
    background: -moz-linear-gradient(    90deg, #1d4763, #215f86);
    background: linear-gradient(         90deg, #1d4763, #215f86);
    overflow: hidden;
    display: inline-table;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
    border-radius: 3px;
    cursor: pointer;


}

#btn:hover {
    background: -webkit-gradient(linear, top, bottom, from(#19405a), to(#1d587d));
    background: -webkit-linear-gradient( 90deg, #19405a, #1d587d);
    background: -moz-linear-gradient(    90deg, #19405a, #1d587d);
    background: linear-gradient(         90deg, #19405a, #1d587d);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
    border-radius: 3px;
}

#btn:active {
    background: -webkit-gradient(linear, top, bottom, from(#19405a), to(#1d587d));
    background: -webkit-linear-gradient( 90deg, #19405a, #1d587d);
    background: -moz-linear-gradient(    90deg, #19405a, #1d587d);
    background: linear-gradient(         90deg, #19405a, #1d587d);
    -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
    border-radius: 3px;
}
    #btn p, span, p span {
        height: 30px;
        line-height: 30px;
        display: inline-block;
        margin: 0 auto
    }

    #btn p {
        padding: 0 12px;
        border-left: 1px solid rgba(0,0,0,.1);
    }

    #btn span.plus {
        padding: 0 12px;
        font-size: 14px;
        font-weight: bold;
        border-right: 1px solid rgba(255,255,255,.1);
    }

    #btn p span {
        font-size: 12px;
    }

Answer 1

You close the .box:hover then close it twice more. Are there missing styles there?

http://jsfiddle.net/calder12/2aHeU/22

.box:hover{
  width: 250px;

  margin-top: -18px;
 -moz-box-shadow:    0 0 50px black;
 -webkit-box-shadow: 0 0 50px black;
 box-shadow:         0 0 50px black;    

}