css - Need help on displaying text in a div when an Image Link is hovered over. -

to paint picture image have 2 divs 1 on top hold 5 thumbnail pics , bottom div has 5 lines of text. idea when hover on picture div want project name of displayed on bottom div. want happen 5 pictures. been searching everywhere , found things close dead end. appreciated trying student project. css can't wrap head around task.

simple demo

the html pretty simple. .photowrapper optional, , class placed on the a.

<div class="photowrapper">   <a href="#">     <img src="//placehold.it/200" alt="" />     <div class="label">text</div>   </a> </div> 

we need inline-block act image.

.photowrapper {   border: 1px solid black;   display: inline-block; } .photowrapper {   display: inline-block; } 

we default our label being transparent. when our .photowrapper hovered, text color changes.

.photowrapper .label {   color: transparent; }  .photowrapper:hover .label {   color: black; } 

if want underline, add rule .photowrapper:hover a set decoration underline. disables on hover , default.

.photowrapper {   text-decoration: none; } 

---

absolute positioning demo

with same html, can position our labels in same place.

.photowrapper .label {   opacity: 0;   color: black; background: yellow;   -moz-transition: opacity 1s ease;   -webkit-transition: opacity 1s ease;   transition: opacity 1s ease;   position: absolute;   top: 100%;   left: 0; } 

---

fancyness

you can have supported browsers transition color changing less jerky result. replace label style this:

.photowrapper .label {   min-height: 1em;   color: transparent;   -moz-transition: color 1s ease;   -webkit-transition: color 1s ease;   transition: color 1s ease; } 

demo

---

if label more text, can instead change/animate opacity.

.photowrapper .label {   opacity: 0;   color: black; background: yellow;   -moz-transition: opacity 1s ease;   -webkit-transition: opacity 1s ease;   transition: opacity 1s ease; }  .photowrapper:hover .label {   opacity: 1; } 

demo