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 Eliot Murton
Eliot Murton
7,315 Points

Fading images combined with cubic bezier

I am trying to combine having one image fade into another whilst at the same time moving the image across the screen in a cubic bezier curve. I have been able to do both individually but cannot combine them together. This is my code so far but I can not get it to work fully.

.wrap2 {
    margin: 0 auto;
    padding: 15px;
    width: 850px;
    height: 300px;
    box-shadow: 0 0 20px;
    cursor: pointer;
    background-image: url("pikachu.jpg");
}

.box2 {
    width: 25%;
    height: 200px;
    border-radius: 8px;

    -webkit-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;
    -moz-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;
    -o-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;
    transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
 }


.wrap2:hover .box2 {
    background-image: url("raichu.jpg");
    margin-left: 75%;
    opacity: 0;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
 }

Can anybody help me out with this? Is it even possible?

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

First up, you don't need to specify transitions in the :hover declaration, just the new values that you want (and that the transitions apply to).

Second, you should add the opacity transition after a comma to the margin/background transitions, since at the moment, they are getting overridden since they appear in the CSS before the opacity one.

So, this:

    -webkit-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;
    -moz-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;
    -o-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;
    transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;

Would become:

    -webkit-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s, opacity 1s ease-in-out;
    -moz-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s, opacity 1s ease-in-out;
    -o-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s, opacity 1s ease-in-out;
    transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s, opacity 1s ease-in-out;