Make a div slide up on click and hover using css3 transitions

Question

I was wondering if someone can help me. I would like to create an on click and hover effect that brings up a div over another div as a sort of overlay. I would preferably like to use css3 transitions but if i have to do it with jquery i will do.

I have found a few things online such as http://jsfiddle.net/UezUj/1/ however this is more of a slide toggle effect and it goes the wrong way. I would like to create something like http://www.ashtonsmith.co.uk/ (if you hover over distribution and logistics) but where the title slides up to reveal the content.

        <div class="col-md-4 box__industries">
                <div>
                <div class="image fill">

            <img src="http://lorempixel.com/g/400/200/" width="363"   height="159">

                </div>
                <div class="content">
                  <h5>Title</h5>
                   This is my content
                </div>

                </div>
              </div>    

I would like the div .content to slide up over the image on click and on hover.

thanks in advance.

Answer 1

Please try the code below:

.box_industries
{
  background: green;
  overflow: hidden;
  text-align: center;
  position: relative;
}

.box_industries .content
{
  background: rgba( 0, 0, 0, 0.9 );
  bottom: -100%;
  color: #fff;
  height: 100%;
  left: 0%;
  text-align: center;
  position: absolute;
  transition: bottom 0.5s ease;
  width: 100%;
}
.box_industries:hover .content
{
  bottom: 0%;
}

 <div class="col-md-4 box_industries">
     <div>
         <div class="image fill">
             <img src="http://lorempixel.com/g/400/200/" width="363"   height="159">
         </div>
         <div class="content">
             <h5>Title</h5>
                 This is my content
         </div>
     </div>
 </div>    

Answer 2

Are you looking for something like this? I have just written some simple code to make it easier for understanding. Let me know your comment If any.

.box-wrapper {
  display: block;
  position: relative;
  z-index: 1;
  width: 200px;
  height: 200px;
  background: url('http://lorempixel.com/200/200/') #808080 no-repeat center center;
  overflow: hidden;
  /*hidden the content inside*/
}
.box-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 200px;
  /*make the content lies under wrapper*/
  background: rgba(128, 128, 128, 0.8);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /*make the smooth transition in 0.3s*/
  color: #fff;
}
.box-wrapper:hover .box-content {
  top: 0;
  /*bring the content back*/
}

<a class="box-wrapper" href="#">
  <div class="box-content">
    <h1>Content</h1>
  </div>
</a>