Sliding Content by Translating the Images on Hover using CSS3


I have a web project to display some portfolio on front page. The idea is :

  • display main portfolio project image
  • if image is hover, sliding up and display project title and client name below them
  • if mouseout then image back to initial position
  • element to display main image portfolio height is set fixed to 250px, so when image slide to top, element’s height not changed.
  • not using jQuery!

Images below is the concept



It’s interesting, I don’t want to use jQuery, so I search another method I found using CSS translation.

  • To move element Im using CSS Translation
  • To set transition effect I’m using CSS Transition
  • using overflow : hidden to set element height fixed to 250px.


  • Using Boootstrap3 for basic styling, so some class of bootstrap3 is included in here.
  • Using google fonts to made my web pretty
	<link href="|Pacifico|Yanone+Kaffeesatz|Poiret+One" rel="stylesheet" type="text/css" />

Here is the code,


<div id="test-body">

<a href="single-portfolio.html">
<img src="" alt="..."/>
<h2>Project Papa Mama the Series</h2>
<p>PT. Dirgantara Indonesia</p>

<a href="single-portfolio.html">
<img src="" alt="..."/>
<h2>Project Ultra Super Cool 2</h2>
<p>Denver Study</p>

CSS Code

padding: 50px 20px;
background: #040404;

.portfolio-client, .portfolio-date, .portfolio-title{
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: #777;

width: 350px;
height: 250px;
margin-bottom: 30px;
overflow: hidden;
margin-right: 20px;

.portfolio-list a{

.portfolio-list div{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

.portfolio-list:hover div{
position: relative;
text-decoration: none;
-webkit-transform: translate(0,-70px);
-moz-transform: translate(0,-70px);
-ms-transform: translate(0,-70px);
-o-transform: translate(0,-70px);

.portfolio-list .caption{
background : #fff;
padding: 10px 20px;
height: 70px;
margin-top: -5px;

.portfolio-list h2.portfolio-title{
margin: 0;
font-size: 26px;

.portfolio-list p.portfolio-client{
margin: 0;

The Result

to see the demo you can go to

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: