CSS caption over hover?

Question

I have a few div boxes on my page, and I'd like to make them display text when you hover over them. I was looking at a few tutorials but I can't seem to get it to work with mine, here is an example of one of my boxes.

html:

  <div class="squar-1">
    <div class="text-1">
      <p>Hello</p>
    </div>
  </div>

CSS:

.squar-1 {
  width: 50%;
  height: 350px;
  background-color: #e57373;
  float: left;
}

.squar-1 .text-1 {
  position:relative;
  bottom:30px;
  left:0px;
  visibility:hidden;
}

.squar-1:hover .text {
visibility:visible;
}

Answer 1

That's working, you wrote .text instead of .text-1

 .squar-1 { width: 50%; height: 350px; background-color: #e57373; float: left; } .squar-1 .text-1 { position:relative; left:0px; visibility:hidden; } .squar-1:hover .text-1 { visibility:visible; } 

  <div class="squar-1"> <div class="text-1"> <p>Hello</p> </div> </div> 

Edit: to transition text, you should used opacity instead of visibility like:

 .squar-1 { width: 50%; height: 350px; background-color: #e57373; float: left; } .squar-1 .text-1 { position:relative; left:0px; opacity: 0; -webkit-transition: opacity 2s; /* For Safari 3.1 to 6.0 */ transition: opacity 2s; } .squar-1:hover .text-1 { opacity: 1; } 

 <div class="squar-1"> <div class="text-1"> <p>Hello</p> </div> </div>