How to hover picture

Question

I like the way it does, for example please see profile picture when you hover 'CR' that will show picture on the top, how does it works?

Please let me know.

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

chack the answer of Alois Mahdal from here

<style>
    #tuxie {
        width: 25px; height: 25px;
        background: url('images/tuxie.png') no-repeat left top;
    }
    #tuxie:hover { background-position: -25px 0px }
</style>

<div id="tuxie" />

double image

JSFiddle

edited May 23 '17 at 12:28

Community

1
1

answered Dec 31 '14 at 05:07

AtanuCSE

8,832
14
74
112

Thank you, appreciate it! Since I am new here, why I am getting negative points if you don't mind? – thunderRX5 Dec 31 '14 at 05:22
1

It's because the way you asked the question. SO rule is 'show what you've tried so far' you just can't ask 'how it works' by giving a link. You have to search, then try something, then if you get stuck or can't achieve what you want then you can ask a question with all details. In short you have to try first and show in your question what you've tried. @Carter – AtanuCSE Dec 31 '14 at 05:51
Ah I see, that makes sense. I understand now. From now on, I will show what I have done so far. @AtanuCSE – thunderRX5 Dec 31 '14 at 06:13

score 1 · Answer 2 · answered Dec 31 '14 at 05:23

This is done with the help of CSS3 attribute which is "transition: all 0.7s ease-out 0s;" This will show this smooth effect and remaining is normal "hover" property of css.

Read about "transition" property of css for more details. http://css3.bradshawenterprises.com/transitions/

How to hover picture

2 Answers2