How to fit a button to a hover box? And the button is not displaying properly?


Tags: css,button,window

Problem :

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: http://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;
    }


Solution :

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;    

}

    CSS Howto..

    How to use more times css transform property?

    How can I fix this Bootstrap layout issue?

    How can I make a fluid width, fluid height, fixed header table with jQuery?

    How to apply background-color: css only in a webkit browser

    How to adjust height based on content css

    How to turn off word wrapping in HTML?

    How to adjust a div to not move when other sibling is faded out

    How to create a Twitter Bootstrap Textarea

    how to arrange the sequence of js and css files in webpage?

    CSS - How to select multiple attribute values?

    How can I properly create a contenteditable “Font Tester” type editor with CSS classes applied by JQuery?

    ASP.NET: How to set the css class of a Control during DataBind?

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?

    How to change custom icon image on hover of the link next to it?

    how to blur all list-items text except for (this) a:hover

    How to draw two non-concentric circles in CSS with numbers inside it?

    How can I align an image with css

    How to insert FontAwesome inside Select2

    How can I make this HTML5 canvas progress bar fill from the bottom up instead of the top down?

    change of encoding shows Weird symbols

    How to adjust CSS to make footer fixed height?

    Use anchors and :target for navigation. How to show first layer by default

    How to make a web form with 3 columns?

    How to pass parameter in CSS and then how to apply if..else on that parameter in ASP.NET?

    How to ensure the header floats with horizontal page expansion?

    Openlayers Map is shown only if the CSS contains a syntax error

    How to expand my CSS3 menu and reduce its width

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    HTML/CSS: how to put all
  • in
      on the same line and centered [duplicate]