CODEWITHSUNDEEP
htmlcsshover
Paweł Skaba
Paweł Skaba

Reputation: 681

Show element on hover another using css

I'm working on a tiny css action which based on A element hover, will display another element. The code is pretty basic:

<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>

.portfolio-reaction {
  width:250px;
  height:250px;
  display:block;
}

.headline-overlay {
    background:none;
    height:100%;
    width:100%;
    display:none;
    position:absolute;
    top:10%;
    z-index:999;
    text-align:left;
    padding-left:0.5em;
    font-weight:bold;
    font-size:1.3em;
    color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
    display:block;
}

and jsfiddle: https://jsfiddle.net/yL231zsk/1/

This solution works in 99%. The missing percent is the effect - while moving mouse arrow through the button, text is blinking. I have no idea why. Secondly - what if I want to extend number of appearing elements from 1 to 3. So to have: 

<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
  <p class="element-1">abc</p>
  <p class="element-2">111</p>
  <div class="element-3">X</div>
</div>
</a>

Thank you for any tips and advices.

Upvotes: 4

Views: 4780

Answers (2)

Ivan
Ivan

Reputation: 40618

You wrote the following in your css file :

.attachment-grid-feat:hover ~ .headline-overlay {
    display:block;
}

It won't work since .attachment-grid-feat isn't the parent of .headline-overlay. So it won't select the state when the parent is selected because there are no element .healine-overlay inside .attachment-grid-feat. Also no need to add ~ between the two. The right selector is the following :

.portfolio-reaction:hover .headline-overlay {
    display: block;
}

This way you are targeting the child div .healine-overlay when parent div .portfolio-reaction (you might want to make the <a> tag a <div> tag) is hovered.

.portfolio-reaction {
  width: 250px;
  height: 250px;
  display: block;
}

.headline-overlay {
  background: none;
  display: none;
  position: absolute;
  top: 10%;
  z-index: 999;
  text-align: left;
  padding-left: 0.5em;
  font-weight: bold;
  font-size: 1.3em;
  color: #000;
}

.portfolio-reaction:hover .headline-overlay {
  display: block;
}
<div title="#" class="portfolio-reaction" href="#">
  <img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
  <div class="headline-overlay">
    <div id="element-1">Hello 1</div>
    <div id="element-2">Hello 2</div>
    <div id="element-3">Hello 3</div>
  </div>
</div>

In this code snippet, three elements are contained inside .headline-overlay. On hover, all three elements are displayed.

Upvotes: 4

EddNewGate
EddNewGate

Reputation: 537

First, change the last CSS line from this:

.attachment-grid-feat:hover ~ .headline-overlay {
    display:block;
}

into this:

.attachment-grid-feat:hover .headline-overlay {
    display:block;
}

And will "half" work. You need after to change the width and height of your <div class="headline-overlay"> from a smaller percentage to match your square width and height(leaving it to 100% covers the entire screen, and as a result, the text wont dissapear, no matter where you will move the cursor). Or, If you want your <div> element to match automaticaly the square size, then you leave the width and height unchanged and change only his position:absolute into position:relative and of course, a little adjusting his position from top.

Here is a working fiddle: https://jsfiddle.net/yL231zsk/9/

Upvotes: 2

Related Questions