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?

#1 sprite-example.jpg7.76 KBjbenjamin


2c’s picture

Issue summary:View changes


jbenjamin’s picture

Issue summary:View changes
new7.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.