Slide rest 50% of the image on hover css

Question

I am working on a site and have successfully converted it from html4.0 to html5 with responsive CSS.

But at last, in am facing a problem. The original site has an image in the footer that shows 50% on y-axis and shows rest hiding it when you hover on it. Live example -> bsonspec.org

The image is in the folder assets/cc.png is below in source code on https://github.com/Rohitkumary/bsonspec

Thanks in advance.

score 2 · Answer 1 · answered Oct 14 '16 at 10:25

Add transition property to 'a.ro'

a.ro { 
    background-repeat: no-repeat;
    background-position: 0 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 150px;
    height: 70px;
    transition: all 0.2s ease-in-out; // add this line
}

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

Add to a.ro

-webkit-transition: background-image 0.2s ease-in-out; //or linear
transition: background-image 0.2s ease-in-out;

Possible duplicate of: CSS3 background image transition

edited May 23 '17 at 12:16

Community

1
1

answered Oct 14 '16 at 10:20

Oancea Stefan

100
8

Slide rest 50% of the image on hover css

2 Answers2