Social Media Icons Hover Effect

  • binxlovecraft · Member ·

    I was previously using the Social Media Side Bar Menu Widget for my social media icons. I recently decided to add two new links that don’t have an available icon with the current widget.

    I created custom icons with the Custom HTML widget, but I don’t like the current hover effect. I would like to add a hover effect but I am unsure how. Any assistance would be appreciated!

    Here is the HTML I am using for the icons.

    <a href="https://weheartit.com/binxlovecraft">
<img title="We Heart It" alt="We Heart It" src="https://aestlh.files.wordpress.com/2020/01/img_6320.png" width="35" height="35" />
</a>
<a href="https://www.facebook.com/Binx-Lovecraft-104740507645663">
<img title="Facebook" alt="Facebook" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_rounded_facebook_svg_5282541.png" width="33" height="33" />
</a>
<a href="https://www.pinterest.com/binxlovecraft/">
<img title="Pinterest" alt="Pinterest" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_33-pinterest_104469.png" width="35" height="35" />
</a>
<a href="https://www.youtube.com/channel/UC6Mbzo7g-z3wK8Ljefg9QfQ?view_as=subscriber">
<img title="Youtube" alt="Youtube" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_youtube_306162.png" width="34" height="25" />
</a>
<a href="https://open.spotify.com/user/fnaiccj09fcgribw009z7202j?si=FmQmYbRmQ6-rLfQWmFOa8Q">
<img title="Spotify" alt="Spotify" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_spotify_rounded_621252.png" width="35" height="35" />
</a>
<a href="https://www.instagram.com/binxlovecraft/">
<img title="Instagram" alt="Instagram" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_38-instagram_1161953.png" width="35" height="35" />
</a>
<a href="https://www.linkedin.com/in/binx-lovecraft-1117b2122/">
<img title="LinkedIn" alt="LinkedIn" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_11-linkedin_104493.png" width="35" height="35" />
</a>
<a href="https://community.girlboss.com/binxlovecraft">
<img title="Girlboss" alt="Girlboss" src="https://aestlh.files.wordpress.com/2020/01/img_6318.png" width="33" height="35" />
</a>

    The blog I need help with is: (visible only to logged in users)

  • binxlovecraft · Member ·

    I was able to figure out how to change the opacity but not the color of the icons when I hover. I would like the icons to change color to #b7c0d6 when the mouse hovers over the icons. I have tried the hover selector but that doesn’t work. Is this because my icon source files are PNG?

    Here is the CSS I used to change the opacity. 

    .textwidget :hover {
	opacity: .7;
}

    Here is the updated HTML

    <div><a href="https://weheartit.com/binxlovecraft" target="_blank"><img style="margin:2px;" src="https://aestlh.files.wordpress.com/2020/01/img_6320.png" width="30" height="30" alt="We Heart It"></a>
<a href="https://www.facebook.com/Binx-Lovecraft-104740507645663" target="_blank"><img style="margin:2px;" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_rounded_facebook_svg_5282541.png" width="30" height="30" alt="Facebook"></a>
<a href="https://www.pinterest.com/binxlovecraft/" target="_blank"><img style="margin:2px;" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_33-pinterest_104469.png" width="30" height="30" alt="Pinterest"></a>
<a href="https://www.youtube.com/channel/UC6Mbzo7g-z3wK8Ljefg9QfQ?view_as=subscriber" target="_blank"><img style="margin:2px;" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_youtube_306162.png" width="30" height="30" alt="“Youtube”"></a>
<a href="https://open.spotify.com/user/fnaiccj09fcgribw009z7202j?si=FmQmYbRmQ6-rLfQWmFOa8Q" target="_blank"><img style="margin:2px;" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_spotify_rounded_621252.png" width="30" height="30" alt="“Spotify”"></a>
<a href="https://www.instagram.com/binxlovecraft/" target="_blank"><img style="margin:2px;" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_38-instagram_1161953.png" width="30" height="30" alt="“Instagram”"></a>
<a href="https://www.linkedin.com/in/binx-lovecraft-1117b2122/" target="_blank"><img style="margin:2px;" src="https://aestlh.files.wordpress.com/2020/01/iconfinder_11-linkedin_104493.png" width="30" height="30" alt="“LinkedIn”"></a>
<a href="https://community.girlboss.com/binxlovecraft" target="_blank"><img style="margin:2px;" src="https://aestlh.files.wordpress.com/2020/01/img_6318.png" width="30" height="30" alt="“Girlboss”"></a>
</div>

    Thank you!

  • staff-zinnia · Staff ·

    Hi –

    Looking at the site there aren’t any icons currently displaying in that widget. It looks like you may have removed them from the media library based on the broken image icon that does display next to each social media network.

  • The topic ‘Social Media Icons Hover Effect’ is closed to new replies.