Treehouse: Grow your CSS skills. Land your dream job.

Image Translate

  • # November 1, 2012 at 11:19 pm

    I am trying to make a splash page of an image, slice it up into 8 equal parts (horizontally) and have each section translate to the right or left (alternating). I started to do it by making them into separate divs, but i had to apply padding to it to make it work, and when viewed at different resolutions there are gaps (or when resizing). What can i do to make this happen more efficiently?


    width: 100%;

    #cabinet1 {

    margin: auto;
    margin-top: auto;
    width: 800px;

    #cabinet1:hover .move-right{
    transform: translate(150px,0);
    -webkit-transform: translate(150px,0); /** Chrome & Safari **/
    -o-transform: translate(150px,0); /** Opera **/
    -moz-transform: translate(150px,0); /** Firefox **/
    #cabinet2:hover .move-left{
    transform: translate(-150px,0);
    -webkit-transform: translate(-150px,0); /** Chrome & Safari **/
    -o-transform: translate(-150px,0); /** Opera **/
    -moz-transform: translate(-150px,0); /** Firefox **/
    .section {
    position: absolute;
    transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out; /** Chrome & Safari **/
    -moz-transition: all 1s ease-out; /** Firefox **/
    -o-transition: all 1s ease-out; /** Opera **/

    background: url(images/enterbutton.png);
    width: 108px;
    height: 468px;
    font-size: 18px;
    font-family: "urbana-1","urbana-2",sans-serif;
    letter-spacing: 1.25px;
    text-shadow: 0px 0px 1px rgba(68,68,68,0.34);
    cursor: pointer;
    width: 60%;

    # November 2, 2012 at 1:54 am

    Please put this in Codepen with either dummy images or properly linked images.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.