Sliding Content by Translating the Images on Hover using CSS3

Problem

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

Untitled

Solution

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.

Additional

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

Here is the code,

HTML Code


<div id="test-body">

<div>
<a href="single-portfolio.html">
<div>
<img src="http://cdn4.blackenterprise.com/wp-content/blogs.dir/1/files/2011/10/past-due-house-350x250.jpg" alt="..."/>
</div>
<div>
<h2>Project Papa Mama the Series</h2>
<p>PT. Dirgantara Indonesia</p>
</div>
</a>
</div>

<div>
<a href="single-portfolio.html">
<div>
<img src=" http://cdn4.blackenterprise.com/wp-content/blogs.dir/1/files/2011/10/home-350x250.jpg" alt="..."/>
</div>
<div>
<h2>Project Ultra Super Cool 2</h2>
<p>Denver Study Co.ltd</p>
</div>
</a>
</div>
</div>

CSS Code


body{
padding: 50px 20px;
background: #040404;
}

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

.portfolio-list{
width: 350px;
height: 250px;
margin-bottom: 30px;
overflow: hidden;
float:left;
margin-right: 20px;
}

.portfolio-list a{
text-decoration:none;
}

.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 http://codepen.io/superpikar/pen/chJal

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: