CODEWITHSUNDEEP
cssbackground-imagetransition
Sean
Sean

Reputation: 61

CSS3 background image position transition

I want a CSS3 hover effect on my website's logo. Easy, right? Well it works, but not the way I want it to.

Link to my logo

The top half of it is the regular state and the bottom half is the :hover state.

I have the standard CSS for changing the background position on :hover, but the CSS3 transition slides the image up and down with the position. Instead, I want it to simply fade in and out to the new position.

Is this possible when working with one image and two positions or will I have to make two separate images (which isn't happening)?

Upvotes: 6

Views: 34238

Answers (4)

XNicON
XNicON

Reputation: 183

https://gordonlesti.com/css-background-transitions-with-image-sprites/

<style>
    .example4 {
        background: url(sprite.png) 0px 0px no-repeat;
        position: relative;
        width: 200px;
        height: 200px;
    }
    .example4::after {
        content: "";
        background: url(sprite.png) -200px 0px no-repeat;
        opacity: 0;
        transition: opacity 0.5s;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .example4:hover::after {
        opacity: 1;
        transition: opacity 0.5s;
    }
</style>

<div class="example4"></div>

Upvotes: 0

Michael Mullany
Michael Mullany

Reputation: 31715

Yes it is possible, but you can't use a simple transition you'll have to use a CSS animation with 4 keyframes

0%   - opacity 1
49%  - opacity 0
50%  - move to new position, opacity 0
100% - opacity 1

Upvotes: 1

Foxinni
Foxinni

Reputation: 4000

This does not mention the background position animation...

.box {
    display:block;
    height:300px;
    width:300px;
    background:url('http://lorempixum.com/300/300') no-repeat;
    background-position:-300px;
    -webkit-transition:background-position 1s ease;
}

.box:hover{
    background-position:0px;
}

Webkit only :(

Via: http://jsfiddle.net/hfXSs/

More here: http://css-tricks.com/parallax-background-css3/

Upvotes: 8

methodofaction
methodofaction

Reputation: 72405

You don't need two separate images, but you do need two separate elements in which to position your logo.

See live version here: http://jsfiddle.net/BdY79/

.logo {
  width: 282px;
  height: 69px;
  background: #fff url(http://scferg.com/wp-content/themes/austere/images/logo.png) 0 -69px no-repeat;
  overflow: hidden;
}

.logo img {
  background-color: #fff;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
}

.logo img:hover {
  opacity: 0;
}

In practice, you probably want to link your logo and you can use the tag to do this, so there's no extra markup. It also degrades gracefully.

Upvotes: 9

Related Questions