I can’t solve a goal using ":Hover". What to do?

Question

I’m doing an institutional website and it’s a kind of web-design agency, only it’s more to learn.

Then at HOME I made several little blocks with links to the service pages. And in each block my intention is to make that when passing the mouse over, appear a brief description before the user click and go to the page.

I managed (in parts) to do this in two ways (in both things went wrong):

first way - overlapping two rows of blocks (the top one with the icons and titles and the bottom one with the descriptions) and when you hover over a block above it changes the height for 0% making appear the block with the description below. Problem: any movement in the mouse causes the class to leave the :hover (logically because the element disappears and the mouse comes out from above).

second way - only a block career. this way my intention was to do so: the block is there with the icon and the title in the form of background-image and the description there (in text within the div) in display:none, ai in the :hover the background-image becomes none and description turns block. Problem This way did not work; I pass the mouse over the div and does not change the display, tried with visibility and it didn’t work either. (I left the part in question visible only for people to see but it’s commented in the code).

The second way I could make the description in image form, would work: just change the background-image. But it would hurt in SEO.

I also tried with Javascript and could not.

Answer 1

Generic solution:

I tried to do only the essentials of CSS, and "chained" the frame with information precisely for you to test the Hover. Just change the dimensions and positions to the desired layout, because this solution is very generic and adaptable.

If you want the two things to appear in exactly the same space, just put the width and height of the span same as the parent block.

The "secret" of the solution is to put the alternative content within the element that will "suffer" the Hover, so when he shows up, Hover remains active.

(Remember to see the 2nd demo, at the end of the post, which is more complete)

a.bloquinho {
  display: block;
  position: relative;
  width: 200px;
  height: 20px;
}
.bloquinho span {
  display: none;
  position: absolute;
  top: 0;   /* ajustar como desejado */
  left: 20px; /* ajustar como desejado */
  background: #eee;
  z-index: 10;
}
.bloquinho:hover span {
  display: block;
}

<a class="bloquinho" href="#">Link 1
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>
<a class="bloquinho" href="#">Link 2
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>
<a class="bloquinho" href="#">Link 3
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>
<a class="bloquinho" href="#">Link 4
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>

Adapting to the linked example:

If you prefer the "curtain" effect, just use the span surrounding the link instead of surrounding the content:

a.bloquinho {
  float:left;
  margin-right: 20px;
  display: block;
  position: relative;
  width:100px;
  height:150px;
  background: #eee;
}

.bloquinho span {
  display: block;
  position: absolute;
  top: 0;
  left: 0px;
  width:100px;
  height:150px;
  -webkit-transition: height .5s;
  transition: height .5s;
  z-index: 10;
  overflow:hidden;
}

.bloquinho:hover span {
  height: 0;
}

<a class="bloquinho" href="#">
  <span><img src="http://i.stack.imgur.com/VmVz4.jpg" width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>
<a class="bloquinho" href="#">
  <span><img src="http://i.stack.imgur.com/VmVz4.jpg" width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>
<a class="bloquinho" href="#">
  <span><img src="http://i.stack.imgur.com/VmVz4.jpg" width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>
<a class="bloquinho" href="#">
  <span><img src="http://i.stack.imgur.com/VmVz4.jpg" width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>