CODEWITHSUNDEEP
csscss-transitions
czmudzin
czmudzin

Reputation: 299

Transition Text Position with CSS

I have a page with 4 equal images that each take up 25% of the page in seperate divs. On hover, an image overlay appears and then text transitions start as well, which all function properly.

The question is, how would I go about aligning my text in the center of each image (or div), and then create a transition where the text slides to another position? They're currently centered the way that I'd like, but I'm not sure where to add the transition...

I've found ways to transition the text in the manner that I want, but I cannot get it to center first. Any help would be much appreciated. JS Fiddle and code below.

JS Fiddle: http://jsfiddle.net/n39wkkb1/1/

CSS:

body {
    background: url('http://www.bootply.com/assets/example/bg_blueplane.jpg');
    height:100%;
    margin:0;
    padding:0;
}
div.bg {
    position:fixed;
    width:50%;
    height:50%
}
#nw {
    background-image: url('clevelandnight.jpg');
    background-size:cover;
}
#ne {
    top:0;
    left:50%;
    background-image: url('news1.jpg');
    background-size:cover;
}
#sw {
    top:50%;
    left:0;
    background-image: url('drinks1.jpg');
    background-size:cover;
}
#se {
    top:50%;
    left:50%;
    background-image: url('clevelandday.jpg');
    background-size:cover;
}
.overlay {
    height:100%;
    text-align:center;
    -webkit-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
    -moz-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
    -o-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
    -ms-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
    transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
}
.bg:hover .overlay {
    background:rgba(0, 0, 0, .75);
    opacity: 1;
    height:100%;
}
.caption {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    font-size:36pt;
    -webkit-transition:font-size .4s ease-out 1s, color .4s ease-out 1s;
    -moz-transition:font-size .4s ease-out 1s, color .4s ease-out 1s;
    -o-transition:font-size .4s ease-out 1s, color .4s ease-out 1s;
    transition:font-size .4s ease-out 1s, color .4s ease-out 1s;
}
.bg:hover .caption {
    color:#7D7D7D;
    font-size:72px;
}

HTML:

<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <title>Craig Does Cleveland</title>
    <link href='stylesheet2.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div id='nw' class='bg'>
      <div class='overlay'>
          <span class='caption'>Night Life</span>
      </div>

    </div>
    <div id='ne' class='bg'>
      <div class='overlay'>
        <span class='caption'>News</span>
      </div>
    </div>
        <div id='sw' class='bg'>
      <div class='overlay'>
        <span class='caption'>Food & Drink</span>
      </div>
    </div>
        <div id='se' class='bg'>
      <div class='overlay'>
        <span class='caption'>Events</span>
      </div>
    </div>
  </body>
</html>

Upvotes: 2

Views: 2240

Answers (1)

web-tiki
web-tiki

Reputation: 103810

You can add the transition on the margin-right property of .caption :

.caption {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    font-size:36pt;
    -webkit-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
    -moz-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
    -o-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
    transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
}

DEMO

Upvotes: 4

Related Questions