Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jeff Busch
Jeff Busch
19,287 Points

Transitions, Anyone?

Hi,

I posted this about ten days ago, we'll give it another try.

I'm making a website for my wife and she wants the main page to resemble and act like this: Kevin Spacey. I'm trying to do this with css only, maybe I can't. If I use divs I can get the transition to ease out but not ease in and the images drop down: Page using divs. If I use tables I can get everything to stay where it belongs but I get no transition ease: Page using tables. Note: The files are the same, I have used comments to change the files. Most of the borders are there for now so I can see what's going on.

I'll post the code this time.

Thanks, Jeff

<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="css/normalize.css"/>
    <link type="text/css" rel="stylesheet" href="css/llb-style-02.css"/>
    <!--<meta http-equiv="Content-Script-Type" content="text/javascript">-->
    <!--<script src="xxxx.js"></script>-->
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <title>LauraBusch.com</title>
  </head>
  <body>

    <div id="HeaderDiv">
            <span id="header-h1"><h1>Laura Busch</h1></span>
        </div>

    <div class="grid-container">

      <!-- <div id="div-1" class="grid-3">
         <p>This is div-1.</p>
      </div>

      <div id="div-2" class="grid-3">
        <p>This is div-2</p>
      </div>

      <div id="div-3" class="grid-3">
        <p>This is div-3</p>
      </div>

      <div id="div-4" class="grid-3">
        <h3>This is div-4</h3>
      </div> -->

      <table>
        <tr>
          <td class="td-1"><p><stromg>td-1</stromg></p></td>
          <td class="td-2"><p><stromg>td-2</stromg></p></td>
          <td class="td-3"><p><stromg>td-3</stromg></p></td>
          <td class="td-4"><p><stromg>td-4</stromg></p></td>
        </tr>
      </table>
    </div>

<div id="footer">
    <p><br>&copy 2014 Laura Busch.  All rights reserved.</p>

</div>

</body>
</html>

body {
     background-color: #DBD7D7;
}

.grid-container > [class^="grid-"] {
  float: left;
  min-height: 1px;
  /*padding-left: 10px;
  padding-right: 10px;*/
  /*margin-left: 2%;*/
}

.grid-container > [class^="grid-"]:first-child {
  margin-left: 0;
}

/*.grid-container > [class^="grid-"]:last-child {
  float: right;
}*/

.grid-container {
  border: 3px dashed black;
  height: 1000px;
  margin-left: 2%;
}

.grid-container:after,
.group:after {
  content: " ";
  display: table;
  clear: both;
}

.grid-1 { width: 6.5%; } /* 65px/1000px = 0.065px */
.grid-2 { width: 15%; } /* 150px/1000px =  0.15px */
.grid-3 { width: 23.5%; } /* 235px/1000px = 0.235px */
.grid-4 { width: 32%; } /* 320px/1000px = 0.32px */
.grid-5 { width: 40.5%; } /* 405px/1000px = 0.405px */
.grid-6 { width: 49%; } /* 490px/1000px = 0.49px */
.grid-7 { width: 57.5%; } /* 575px/1000px = 0.575px */
.grid-8 { width: 66%; } /* 660px/1000px = 0.66px */
.grid-9 { width: 74.5%; } /* 745px/1000px = 0.745px */
.grid-10 { width: 83%; } /* 830px/1000px = 0.83px */
.grid-11 { width: 91.5%; } /* 915px/1000px = 0.915px */
.grid-12 { width: 100%; } /* 1000px/1000px = 1 */

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  /*margin: 0 2% 1% 0;*/
  margin: auto;
  padding: 0;
  float: left;
  display: block;
}

.grid-3 {
  height: 1000px;
  overflow: hidden;
}

#HeaderDiv {
  width: 100%;
  height: 75px;
    background-color: #0C5810;
    margin-top: 0%;
    text-align: center;
    display: table;
    border: 3px dashed yellow;
}

#HeaderDiv h1 {
  margin: auto;
}

#header-h1 {
  color: #fff;
  display: table-cell;
    vertical-align: middle;
}

#div-1 {
  background: url('../img/dsc_0047.jpg') center no-repeat;
  border-right: 3px solid #fff;
}

#div-1:hover,
#div-2:hover,
#div-3:hover,
#div-4:hover {
  width: 1000px;
  -webkit-transition: width 1s ease-in-out;
  -mox-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  -ms-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

#div-2 {
  background: url('../img/dsc_0033.jpg') center no-repeat;
  border-right: 3px solid #fff;
}

#div-3 {
  background: url('../img/dsc_0098.jpg') center no-repeat;
  border-right: 3px solid #fff;
}

#div-4 {
  background: url('../img/dsc_0100') center no-repeat;
}

#footer {
  text-align: center;
  border: 3px solid blue;
  clear: both;
}


/**** Table css***********/

table {
  width: 100%;
  height: 1000px;
}

.td-1 {
  background: url('../img/dsc_0047.jpg') center;
  border-right: 3px solid #fff;
  height: 1000px;
}

.td-1:hover,
.td-2:hover,
.td-3:hover,
.td-4:hover {
  width: 1000px;
  -webkit-transition: width 1s ease-in-out;
  -mox-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  -ms-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

.td-2 {
  background: url('../img/dsc_0033.jpg') center;
  border-right: 3px solid #fff;
}

.td-3 {
  background: url('../img/dsc_0098.jpg') center;
  border-right: 3px solid #fff;
}

.td-4 {
  background: url('../img/dsc_0100') center;
}

5 Answers

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

If you want to stick with CSS, you could use flexbox. Using your html, try the CSS below:

.grid-container {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  height: 1000px;
  width: 100%;
  overflow: hidden;
}

.grid-3 {
  margin: auto;
  padding: 0;
  height: 1000px;
  overflow: hidden;
}

#div-1:hover,
#div-2:hover,
#div-3:hover,
#div-4:hover {
  flex: 2 0 0;
  -moz-flex: 2 0 0;
  -webkit-flex: 2 0 0;
}

#div-1,
#div-2,
#div-3,
#div-4 {
  flex: 1 0 0;
  -moz-flex: 1 0 0;
  -webkit-flex: 1 0 0;
  transition: 0.4s all;
  -moz-transition: 0.4s all;
  -webkit-transition: 0.4s all;
}

/***********
OTHER STYLES
***********/

body {
  background-color: #DBD7D7;
}

#div-1 {
  background: #57385C;
}

#div-2 {
  background: #A75265;
}

#div-3 {
  background: #EC7263;
}

#div-4 {
  background: #FEBE7E;
}

#footer {
  text-align: center;
  clear: both;
}

#HeaderDiv {
  width: 100%;
  height: 75px;
  margin-top: 0%;
  text-align: center;
  display: table;
}

#HeaderDiv h1 {
  margin: auto;
  color: #57385C;
}

#header-h1 {
  color: #fff;
  display: table-cell;
  vertical-align: middle;
}
Naomi Freeman
STAFF
Naomi Freeman
Treehouse Guest Teacher
Naomi Freeman
Naomi Freeman
Treehouse Guest Teacher

For code review and pair programming, you're more likely to find success on codementor.io and airpair.com :)

I'm interested in your challenge because I also saw it on this Oprah website recently: http://www.oprah.com/own-brene-brown-course/brene-course-bundle-landing.html?utm_source=OMagPrint&utm_medium=20140131&utm_campaign=1

A friend of mine thinks it's actually a weirdly placed nav bar. The "transitions" may in fact be JS animations. I haven't explored it deeply yet though.

Michael Austin
PLUS
Michael Austin
Courses Plus Student 7,814 Points
Michael Austin
Michael Austin
Courses Plus Student 7,814 Points

Hi,

To replicate the KevinSpacey functionality you would need JS. You can come up with a solution that’s close by animating margins rather than widths in CSS. Have a look at http://www.webarti.com/css3-horizontal-accordion-slider/content-slider/. Though it doesn’t work exactly how the Kevin Spacey site is, you should be able to manipulate it to your needs.

Thanks

Jorge Hernandez
Jorge Hernandez
23,572 Points
Jorge Hernandez
Jorge Hernandez
23,572 Points

Try using Jquery.

event: Hover -> http://api.jquery.com/hover/ and animate() -> http://api.jquery.com/animate/

example -> http://web.tj8b5ipis4.treehouse-app.com/

code:

$(document).ready(function(){

$("#div-1").hover( function(){ $(this).animate({ width: "+=100" },100); $("#div-2").animate({ width: "-=100" },100);

},
function(){
    $(this).animate({
        width: "-=100"
        },100);
    $("#div-2").animate({
        width: "+=100"
        },100);

}

);

$("#div-2").hover( function(){ $(this).animate({ width: "+=100" },100); $("#div-1").animate({ width: "-=100" },100);

},
function(){
    $(this).animate({
        width: "-=100"
        },100);
    $("#div-1").animate({
        width: "+=100"
        },100);

}

);

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Thanks to everyone who replied. Jacob, you are awesome. I wish I could give you 24 points, make that 36 points. I put the large images in and it worked perfectly. I'm also impressed at how simple the code is. I need to study flex box more. I was pretty sure this could be done without JavaScript. Thanks again Jacob.

Jeff

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

BTW, a little tip to make it more like the site you linked to - center your background images with background: center center url() so that when the containing div expands, you don't just see more of the right side of the image, but it stays centered and reveals more of both sides of the image. If that makes sense. :P