Hover effect not working

Summary:

CSS applied to images = utter failure

Hover effect not working

Whane The Whip 23 Dec 2011 19:02

This isn't a theme per se issue, but CSS so this seemed the best suited forum.

For some reason, I cannot get the opacity to change with a mouse over. For example, I want to take some social media icons, set the opacity to 0.8 then have it go to 1.0 on a mouse over. This was my original code and syntax…

CSS

.surfimage {
    display: block;
    margin-bottom: -10px;
    opacity: 0.8;
}

.surfimage a:hover {
    display: block;
    margin-bottom: -10px;
    opacity: 1.0;
}

Wikidot Markup

[[image http://hbcult.wdfiles.com/local--files/social2/fb.png width="55px" link="http://www.facebook.com/pages/HB-Cult/176391372377987" class="surfimage"]]

But that didn't work. I also tried it without the display:block… that was a nogo. Then I looked at my theme css because in it, I have the site logo go from a 0.8 opacity to 1.0 PLUS a webkit transform of about 8 in rotation with no apparent issues. I noticed that in this case the image that gets transformed is the background image so then I tried creating the same css that worked in the theme header but for my social icons….

new test CSS

.surftest {
    display: block;
    margin: 0; padding:0;
    background-image: url(http://hbcult.wdfiles.com/local--files/social2/fb.png);
    width: 61px;
    height: 215px;
    opacity: 0.8;
}

.surftest a:hover{
    display: block;
    margin: 0; padding:0;
    background-image: url(http://hbcult.wdfiles.com/local--files/social2/fb.png);
    width: 61px;
    height: 215px;
    opacity: 1.0;
    -webkit-transform: rotate(-5deg);
}

Wikidot Markup for new test

[[div class="surftest"]]

[[/div]]

The image appeared but once again there was no hover effect. After that I tried changing the way I apply the class to the image with:

[[div class="surfimage"]]
[[image http://hbcult.wdfiles.com/local--files/social2/fb.png width="55px" link="http://www.facebook.com/pages/HB-Cult/176391372377987"]]
[[/div]]

That also did not work. I don't know what else to try.

Any help would be appreciate. My test page is here: http://hbcult.com/social2 and this is for the site http://hbcult.com/

---

Atheism Blog

Re: Hover effect not working

Ed Johnson 24 Dec 2011 06:52

When i set up my social icons for http://www.eagletracegolf.com, I was looking for something similar, but coded it slightly differently. I used a single background image for both icons and changed the background position to get the correct portion to display. I then used a transparent GIF in my [[image ...]] code to create the link. If you look at the site, you'll see that we have Facebook and Twitter links locked into the upper right side of the browser window. Initial opacity it set at 50%. On hover, opacity is set to 100% and a different background image is swapped in using sprites (loading a single image that has both states and then repositioning the image).

This should work for you with just a single background image and just changing the opacity.

Here's the code I'm using (note that I have the hooks in place for a similar YouTube icon, but it's not turned on).

Page Source

[[span class="facebook"]][[image http://www.eagletracegolf.com/local--files/css:theme/transp.gif link="*http://www.facebook.com/pages/Eagle-Trace-Golf-and-Event-Center/176082305776783" width="63px" height="63px" style="border:0px"]][[/span]]
[[span class="twitter"]][[image http://www.eagletracegolf.com/local--files/css:theme/transp.gif  link="*http://twitter.com/#!/eagletracegolf" width="63px" height="63px" style="border:0px"]][[/span]]

The CSS sprite Image

(Note: each circle is 64px, so you can see how the CSS is controlling the position for each icon and corresponding state)

The CSS

/* SOCIAL ICONS
============================== */
.facebook a, .twitter a , .youtube a {
    position: fixed;
    display: block;
    height: 64px;
    width: 64px;
    z-index: 140;
    background-repeat:no-repeat;
}
.facebook a, .twitter a , .youtube a {
    right: 0;
    opacity: .5;
    filter:alpha(opacity=50);
    color: transparent;
    overflow: hidden;
    background-image: url(/local--files/css:theme/socials64fty.png)
}
.facebook a {
    top: 0;
    background-position:0px 0px;
}
.twitter a {
    top: 64px;
    background-position:0px -64px;
}
.youtube a {
    top: 128px;
    background-position:0px -128px;
}
/* change opacity of any icons on mouse over */
.facebook a:hover, .youtube a:hover, .twitter a:hover {
    opacity: 1;
    filter:alpha(opacity=100);
}
/* shift the background image on mouse over */
.facebook a:hover {
    background-position:-64px 0px;
}
.twitter a:hover {
    background-position:-64px -64px;
}
.youtube a:hover {
    background-position:-64px -128px;
}

Sidebar Note

In looking at my CSS, I see that I should probably add a couple more browser-specific bits of CSS for better compatibility with more/older browsers (-moz and -webkit for sure).
I found this on css-tricks.com. It's a bit old, but I think most modern browsers qualify as "Good browsers".

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 
  /* IE 5-7 */
  filter: alpha(opacity=50);
 
  /* Netscape */
  -moz-opacity: 0.5;
 
  /* Safari 1.x */
  -khtml-opacity: 0.5;
 
  /* Good browsers */
  opacity: 0.5;
}

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Last edited on 24 Dec 2011 07:01 by Ed Johnson + Show more

Re: Hover effect not working

Whane The Whip 29 Dec 2011 23:07

That worked Ed. Thanks. I'm still uncertain as to why my code did not work. BTW I like what you did with your icon set. I've seen the "busting out" icon set before but didn't think it fit with any of my sites. Your solution is very creative.

---

Atheism Blog