Hovering Over Image And Reveal Div Element

Is there any possible ways when I hover over one element and revealing my other element with pure css? I know how to make simple hover effects such as .class{ //some styles } .cla

Solution 1:

Here's a fiddle

If you have elements nested within each other, you can use the following:

<div id='parent'>
    <div id='child'></div>
</div>

#parent {
    width: 200px;
    height: 200px;
    background: blue;
}
#child {
    display: none;
    width: 100px;
    height: 100px;
    background: red;
}
#parent:hover #child {
    display: block;
}

Solution 2:

There are three ways of doing this. The elements have to be

1. adjacent
2. nested within (descendant)
3. nested within (Child)

So you could do as

HTML

<div class="test test1">hover over me</div>
<div class="test test1-h"></div>

<br><br>

<div class="test test2">
    hover over me
    <div class="test test2-h"></div>
</div>

<br><br>

 <div class="test test3">
     hover over me
     <div>
         <div class="test test3-h"></div>
     </div>
 </div>

CSS

.test {
    padding: 30px;
    background: red;
    display: inline-block;
}

.test .test {
    background: blue;
}
/******************Adjacent***************/
.test1:hover+div.test1-h {
    display: none;
}
/*****************nested within (descendant)***/    
.test2:hover > .test2-h {
    background: green;
}
/*****************nested within (Child)***/
.test3:hover .test3-h {
    background: tomato;
}

here is a DEMO

Solution 3:

I also found onother solution for my code may be help fore someone else. I achieved it with opacity and visibility Fiddle