.imagepluscontainer{ /* main image container */position: relative;z-index: 1;}.imagepluscontainer img{ /* css for image within container */position: relative;z-index: 2;-moz-transition: all 0.5s ease; /* enable css3 transition on all props */-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}.imagepluscontainer:hover img{ /* css for image when mouse hovers over main container */-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-moz-transform: scale(1.05, 1.05);-webkit-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);}.imagepluscontainer div.desc{ /* css for desc div of each image. */position: absolute;width: 90%;z-index: 1; /* set z-index to that less than image's, so it's hidden beneath it */bottom: 0; /* default position of desc div is bottom of container, setting it up to slide down */left: 5px;padding: 8px;background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */color: white;-moz-border-radius: 0 0 8px 8px; /* css3 rounded borders */-webkit-border-radius: 0 0 8px 8px;border-radius: 0 0 8px 8px;opacity: 0; /* set initial opacity to 0 */-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* css3 shadows */-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);-moz-transition: all 0.5s ease 0.5s; /* enable css3 transition on desc div. final 0.5s value is the delay before animation starts */-webkit-transition: all 0.5s ease 0.5s;-o-transition: all 0.5s ease 0.5s;-ms-transition: all 0.5s ease 0.5s;transition: all 0.5s ease 0.5s;}.imagepluscontainer div.desc a{color: white;}.imagepluscontainer:hover div.desc{ /* css for desc div when mouse hovers over main container */-moz-transform: translate(0, 100%);-webkit-transform: translate(0, 100%);-ms-transform: translate(0, 100%);-o-transform: translate(0, 100%);transform: translate(0, 100%);opacity:1; /* reveal desc div fully */}

<div class="imagepluscontainer" style="width:larguradafotopx; height:altura da fotopx; z-index:2"> <img src="urldafoto" /><div class="desc">aqui você coloca o que ira aparecer na descrição quando passar o mouse</div></div>