0

I want to do fade in and fade out effects using only CSS. If I move or hover over one div element, I then need to call another DIV to fade in, snd then it should fade out agsin when the mouse leaves. DOM element calling and effect should be in CSS or CSS3. I can't use javascript and Jquery.

<style> 
#b
{
    width: 200px;
    height: 40px;
    background: red;
    border-radius: 10px;
    text-align: center;
    margin: 35px;
    padding: 30px 0px;
    box-shadow: 2px 4px 10px 2px;
    opacity:0;
    color: white;
    font: 20px bold;
}
#a
{
    width: 200px;
    height: 40px;
    background: rgb(156, 155, 155);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    margin: 35px;
    padding: 30px 0px;
    box-shadow: 2px 4px 10px 2px;
    color: white;
    font: 20px bold;
}

#a:hover + #b { 
    animation:myfirst 1s;
    -webkit-animation:first 1s;
    opacity:1;
                }

@keyframes first
{
from {opacity:0.1;}
to {opacity:1;}
}

@-webkit-keyframes first 
{
from {opacity:0.1}
to {opacity:1;}
}

</style>

<div id="a">Hover</div>
<div id="b">show</div>
StackExchange What The Heck
  • 2,656
  • 7
  • 39
  • 51
Manoj
  • 1,860
  • 1
  • 13
  • 25

1 Answers1

7

You can easily achieve that with opacity and the adjacent sibling combinator.

Check out the jsfiddle for a vendor prefixed version.

#container + div {
    transition: opacity .25s; 
    opacity: 0;
}

#container:hover + div {
    opacity: 1;
}

Transition browser support

Adjacent sibling combinator (+ selector) documentation

damian
  • 5,314
  • 5
  • 34
  • 63