CODEWITHSUNDEEP
css
user3926604
user3926604

Reputation: 189

div disappears when hovering over it or it leaves a white space

I have asked this question before here div disappears when hovering over it and replacing margin with position relative fixed the problem but now I get white space http://jsfiddle.net/x3a6frgx/3/ (note the space between div2 and the bottom border) how can I fix that?
css code:

#body {
    border-width: 10px;
    border-color: red;
    border-style: groove;
}

#image {
    display: block;
}
#div1 {
    transition: opacity 1s;
    background-color: red;
    opacity: 0;
    position: relative;
    top: -20px;
    width: 100px;
}
#div1:hover {
    opacity: 1;
}
#div2 {
    background-color: blue;
}

Upvotes: 1

Views: 88

Answers (1)

klasske
klasske

Reputation: 2174

Instead of top, use margin-top for #div1:

#div1 {
   transition: opacity 1s;
   background-color: red;
   opacity: 0;
   position: relative;
   margin-top: -20px;
   width: 100px;
}

Upvotes: 1

Related Questions