Member Avatar for RenanLazarotto

Hello guys! I'm making a site and I want to add a mouserover effect on the social-network icons, exactly like what WinRumors (http://www.winrumors.com/) have on their social icons. To understand what I mean (and what I want), open the WinRumors site and place your cursor on top of any of the social icons (twitter, facebook...).

I've tried searching an how-to over the web, but haven't found anything like that. I don't know how to do it by myself, so I'm asking people that know much more here.

Can someone help me? Thanks in advance!

  • 5 Contributors
  • 12 Replies
  • 151 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by RenanLazarotto
Member Avatar for JorgeM

So, not sure how comfortable you are with HTML, CSS, and JavaScript, but if you look at the page's source code, depending on your knowledge, you could figure out how its setup. That's the downside of client side code. You really cant hide the CSS, and JavaScript, like you would with server-side code. At most, you can have a complex page, minify the code and make it difficult to read and navigate through the logic so that people will just give up on using your stuff.

Now, I am not recommending that you copy someone's work, but you may find that the page is using publically available jQuery scripts, samples, etc..

Member Avatar for RenanLazarotto

Thanks for the replies! I don't want to copy their work, I want to learn how to do by myself. This don't count as copying, does it?

Anyway, why I shouldn't use CSS transitions? They're pretty nice, clean and I think it is better to use CSS than jQuery/JavaScript.

Member Avatar for JorgeM

There is nothing wrong with using CSS Transitions. The only thing to consider, in my opinion, is supportability across browsers. You should never rely on styles for website functionality if the styles are not browser interoperable. If the style you are implementing is supported for your audience, then there is no reason not to implement that style.

Member Avatar for theHop

what @JorgeM said is the only reason I said that I would use JQuery. It's not that there's anything wrong with the CSS transitions but I know it won't work on everyone's browser. It's just personal choice at the end of the day.

the good thing about CSS3 transitions is that, for browsers that support it, it will work as most (or none as far as I'm aware) browsers don't have a setting to turn CSS off but they do for Javascript.

I, personally would never dream of using an out of date browser. but there are people who don't update them. there are also alot of actual organisations that (for some odd reason) stay 2 versions behind the latest at all times. this is where JQuery (or even native js) come in.

Member Avatar for RenanLazarotto

I test my sites on latest Chrome, Firefox, Opera and IE9. I would test on Safari too, if it had an newer Windows version. I think that those are the most used browsers so far.

But, and I don't want to sound an idiot by saying this, I still don't know how to do that hover effect. It isn't something that I desperately need, but it is something that I think it would be awesome to know. I'll try to look at their source-code, but I'll still wait for some replies here.

Thanks in advance, again!

Edit:
I was looking into the code and this was what I found:

<a class="twitter" href="http://www.twitter.com/winrumors" title="Subscribe to &#64;winrumor&#39;s Twitter Feed"><span>Twitter</span></a>

And the matching classes:

.twitter { background-position: 0 0; background-color: #66ccff; }
.twitter:hover { background-position: 0 -5px; background-color: #66ccff !important; }

But, it still don't make much sense to me.
Also, the containing list has those classes:

.social { margin-bottom: 16px; }
.social > ul { overflow: hidden; }
.social > ul > li { float: left; margin-left: 4px; display: block; }
.social > ul > li:first-child { margin-left: 0; }
.social > ul > li > a { display: block; width: 56px; height: 10px; color: #fff; padding: 54px 8px 8px; background-image: url(images/social.png); background-repeat: no-repeat; font-size: 10px; line-height: 12px; font-weight: 700; -webkit-transition: background .2s ease-in-out, -webkit-transform .1s ease-in-out; -moz-transition: background .2s ease-in-out, -moz-transform .1s ease-in-out; -ms-transition: background .2s ease-in-out, -ms-transform .1s ease-in-out; transition: background .2s ease-in-out, transform .1s ease-in-out; }
.social > ul > li:active > a,
.social > ul > li > a:active,
.newstip > a:active { -webkit-transform: scale(.95, .95); -moz-transform: scale(.95, .95); -ms-transform: scale(.95, .95); transform: scale(.95, .95); }

Which I also don't understand fully. Can someone explain it a bit to me?

Edited by RenanLazarotto
Member Avatar for JorgeM

Oh, OK....so good job doing the research. Unless Im mistaken, the way that they are handling this is that on the hover effect is simply that they are moving the picture up 5 pixels. That's the magic. So I beleive that they are not showing the full picture and are just moving it up and down depending on the state.

background-position: left top;

background-position: 0 -5px;

Member Avatar for RenanLazarotto

But, there is one thing to note. They're moving the image 5 pixels up AND showing some text that is hidden. The matter now is the text to me. What kind of function do I need to use?

Sorry to sound so noobish and sorry to ask too many questions, but I want to know how it works so I don't just copy and paste some code that I don't understand. :D

Member Avatar for ome2012

you can make two images at 1 icon.... the other one is just the icon and the second one is the icon with the name of it.... then you will be the one to hide or show or adjust by using css.... its simple ^_^

Member Avatar for RenanLazarotto

ome2012, thanks for the tip, but since I'm a bit prefectionist, I want to reproduce the icon exactly the way it is :P The "twitter" text is inside <span> tags, which have this code:

.social > ul > li > a > span { height: 0; overflow: hidden; display: inline-block; -webkit-transition: height .2s ease-in-out; -moz-transition: height .2s ease-in-out; -ms-transition: height .2s ease-in-out; transition: height .2s ease-in-out; }
.social > ul > li > a:hover > span { height: 12px; }

But, when I try to do the same height thing, it doesn't work at all, the text is always there.

I've tried to do something like .myclass > a > span and .myclass > a:hover > span, but no luck. maybe it needs to be inside an unordered list? Also, can someone explain what is this > in the code? I'm pretty new to lots of CSS things and don't know what this means.

Here's a link to the WinRumors CSS file: http://www.winrumors.com/wp-content/themes/winrumors2/style.css?1322953417 (is this okay?) The most important classes are twitter, facebook, youtube, social, since this is what I'm trying to replicate.

Thanks to everyone who's helping!

Member Avatar for RenanLazarotto

This has been dead for a while, so I think it would be nice to come back here and give feedback. I gave up this project a long time ago as I will no longer work making sites, but I'd like to thanks anyway to those who helped me.

Cheers!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.