Slider on Mouse Move

suitable for product/info profile/desc

by sundaramkumar

HTML

<!-- based on http://jsfiddle.net/c3xAy/ -->
<div>
<div class="screen" style="float:left">
    <div class="header">
         <h4>My Profile</h4>
    </div>
    <!-- positioned absolutely in the background -->
    <img class="background" src="https://pbs.twimg.com/profile_banners/45394577/1384289888/web">

      <!-- This slider moves on hover --> 
       <div class="slider">
          <!-- Section 1 -->
           <div class="header1">
            <img class="profilepic" src="https://pbs.twimg.com/profile_images/378800000297360664/96d9e7224ec40be585466172a3785249.png">
             <h3> William Newton</h3>

        </div>
        <!-- Section 2 -->
        <div class="header2">
            <p>Adventurer, Product Designer @DJZ, Building @CrossfaderApp, Check out my work at http://williamnewton.co</p>
            <p>San Francisco, CA · williamnewton.co/blog</p>
        </div>
    </div>
</div>
        
<div class="screen" style="float:left">
    <div class="header">
         <h4>My Profile</h4>
    </div>
    <!-- positioned absolutely in the background -->
    <img class="background" src="https://pbs.twimg.com/profile_banners/45394577/1384289888/web">

      <!-- This slider moves on hover --> 
       <div class="slider">
          <!-- Section 1 -->
           <div class="header1">
            <img class="profilepic" src="https://pbs.twimg.com/profile_images/378800000297360664/96d9e7224ec40be585466172a3785249.png">
             <h3> William Newton</h3>

        </div>
        <!-- Section 2 -->
        <div class="header2">
            <p>Adventurer, Product Designer @DJZ, Building @CrossfaderApp, Check out my work at http://williamnewton.co</p>
            <p>San Francisco, CA · williamnewton.co/blog</p>
        </div>
    </div>
</div>
    </div>

CSS

.screen:hover .background {
    opacity:0.5;
}
.slider:hover {
    left:-320px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
body {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.header {
    width:100%;
    height:60px;
    background:#56B8DE;
    text-align:center;
    float:left;
    color:#fff;
}
.profilepic {
    width:64px;
    height:64px;
    border-radius:80%;
    margin-top:20px;
    border:2px solid #fff;
    box-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);
}
h3 {
    margin-top:0;
    text-shadow:0px 1px 3px rgba(0, 0, 0, 0.75);
}
.screen {
    margin:0 auto;
    margin-top:24px;
    width:320px;
    height:200px;
    box-shadow: 0px 2px 6px #999;
    position:relative;
    overflow:hidden;
    /*background:#333;*/
}
.slider {
    width:640px;
    float:left;
    left:0;
    position:relative;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.background {
    position:absolute;
    width:320px;
    height:auto;
    z-index:0;
    top:60px;
    left:0;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.header1, .header2 {
    text-align:center;
    width:320px;
    float:left;
    height:140px;
    color:#fff;
    position:relative;
}
.header2 {
    padding-top:24px;
    background:#56B8DE;
}
p {
    font-size:12px;
    text-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);
}