Bootstrap Expand Div - html

Question

I'm trying to create a website that does the same thing this website does. www.treasurelimo.com If you scroll down on the homepage and look at 'popular destination'. When you hoover over the images the blue area expands and more info is seen.
I'm using wordpress but don't want to use any plugins. Right now I have those images being populated from other posts. Here is how mine works. Here is my site: www.sealfitdev.demosite.us/coaching-staff I got the CSS to place the words inside of picture, I just need it to expand when I hoover over it. Can anyone help me or point me to a post that shows how I can do that? I was looking over the bootstrap documentation and I wasn't successful. Thanks

Answer 1

You can accomplish the effect using CSS transitions (see some basic examples here).
See an example of this for your use-case at this JSFiddle (not a particularly clean example, but it should illustrate the concept).
I've taken the markup from your site and simplified it a little for clarity.
<div class="employee-thumb pull-left">
<div class="inner">
<img width="150" height="150" src="http://i.forbesimg.com/media/lists/people/elon-musk_416x416.jpg" />
<div class="info">
<p>Elon Musk</p>
<p>Additional information including buttons</p>
</div>
</div>
</div>
Now in the CSS, we can set .info to be absolutely positioned within the relative positioned parent, .inner. Since .inner's overflow is hidden the content can be pushed outside our visibility by adjusting the absolute positioning.
.inner {
position: relative;
overflow: hidden;
max-width: 150px;
}
.inner .info {
background-color: rgba(255,255,255,0.7);
position: absolute;
bottom: -4em;
}
On hovering over .inner, .info, the absolute positioning of bottom returns to 0, sliding the content up.
.inner:hover .info {
bottom: 0em;
}
And we animate the whole thing using a CSS transition.
.inner .info {
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;
}