The appearance of text and effects when you hover over the block

Question

The appearance of text and effects when you hover over the block

Tell me how to organize in css the appearance of text and effects from nowhere when the mouse hovers over an object, i.e. when hover. I can just make a smooth selection of an object, etc., i.e. change its style, but how do I create text on the block or internal borders, buttons, as an effect?

1

html css css3

Author: ivanforpw, 2012-11-11

Source

1 answers

score 5 · Accepted Answer

Inside the block, make another block. In styles .first_block:hover .second_block { animate...

.first_block {
  display: inline-block;
  width: 300px;
  height: 200px;
  border: 1px red solid;
  padding: 10px;
}

.second_block {
  display: none;
}

.first_block:hover .second_block {
  display: block;
}

<div class="first_block">
  <div class="second_block">
    Текст
  </div>
</div>