When a user moves their mouse pointer over a social media icon, it would be nice for the icon to change (to indicate its hover state).

The :hover pseudo selector can sometimes be used to help achieve this in CSS, however the images being displayed in the HTML output of the socialmedia module currently rely on the < img > element.

Would it be possible to accomodate a hover state for the social media icons?

CommentFileSizeAuthor
#1 sprite-example.jpg7.76 KBjbenjamin

Comments

2c’s picture

2c commented
Issue summary: View changes

.

jbenjamin’s picture

jbenjamin commented
Issue summary: View changes
StatusFileSize
new sprite-example.jpg7.76 KB

I know this is an old issue but for anyone looking, here's a workaround

1 - modify your icons to behave like sprites: create your hover state and then either double the height or width of your image and place the hover state beside the original sprite example

2- modify your css to take advantage of the sprite - this example uses the horizontal widget layout, so adjust as necessary.


.blockName .widgets-style-horizontal a{
 height: 32px;
 display: block;
 text-align: center;
 overflow: hidden;
}
.blockName .widgets-style-horizontal a img {
   margin-top: -32px ;
}
.blockName .widgets-style-horizontal a:hover img{
   margin-top: 0px !important;
}

that's it. you should now have a working rollover effect.