Spruz Owners' Community For owners of websites powered by the Spruz Platform

View All

Add Hover Effect to images

Posted by Robert McDougal Feb 9th 2013 Category: General

You know those sites that with HTML, you can create an opacity layer that when people hover over the image with a mouse, it brightens or darkens or turns a color. The example I found that's closest to what I want is RedLetterMedia.com

If you look on the side, there's little icons for their social media. if you hover over them, they brighten. Yeah, so how with HTML can I add that same effect for when people hover those icons on my site? I want an opacity level/difference of 0.8. Thanks. Oh and here's the HTML I'm currently using for my "Follow TMB" element which you can see in use at themcdougalbugle.com. but I currently don't have the hover affect

 

<div style="text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 300px;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://facebook.com/pages/The-McDougal-Bugle/345647478796458" style="font-family: arial; font-size: 13px; text-align: center; color: rgb(255, 255, 255); text-decoration: initial !important;"><img alt="" src="/gfile/75r4!-!IIJMFL/facebook.png" /></a></td>
<td style="text-align: center;">
<a href="http://twitter.com/mcdougalbugle" style="font-family: arial; font-size: 13px; text-align: center; color: rgb(255, 255, 255); text-decoration: initial !important;"><img alt="" src="/gfile/75r4!-!IIJMFL/twitter.png" style="border: none; max-width: 280px !important; height: auto !important;" /></a></td>
<td style="text-align: center;">
<a href="/rss.htm" style="font-family: arial; font-size: 13px; text-align: center; color: rgb(255, 255, 255); text-decoration: initial !important;"><img alt="" src="/gfile/75r4!-!IIJMFL/rss.png" style="border: none; max-width: 280px !important; height: auto !important;" /></a></td>
<td style="text-align: center;">
<a href="http://plus.google.com/103999235566398251779" style="font-family: arial; font-size: 13px; text-align: center; color: rgb(255, 255, 255); text-decoration: initial !important;"><img alt="" src="/gfile/75r4!-!IIJMFL!-!zrzor45!-!HJPDMOJS-MINJ-HEQI-MPDG-JIHQPORFMDDQ!-!72y1nq/googleplus.png" style="border: none; height: 32px; width: 32px; max-width: 280px !important;" /></a></td>
<td style="text-align: center;">
<a href="http://youtube.com/themcdougalbugle" style="font-family: arial; font-size: 13px; text-align: center; color: rgb(255, 255, 255); text-decoration: initial !important;"><img alt="" src="/gfile/75r4!-!IIJMFL/youtube.png" style="border: none; max-width: 280px !important; height: auto !important;" /></a></td>
<td style="text-align: center;">
<a href="mailto:robert@themcdougalbugle.com"><img alt="" src="/gfile/75r4!-!IIJMFL!-!zrzor45!-!HJPDMOJS-MINJ-HEQI-MPDG-JIHQPORFMDDQ!-!72y1nq/email.png" style="color: rgb(255, 255, 255); font-family: arial; font-size: 13px; text-align: center; width: 32px; height: 32px;" /></a></td>
</tr>
</tbody>
</table>
</div>
 
Rate0

Replies

  • Posted by Sarah Fan Feb 10th 2013

    I think this is what you mean --

    Probably check the site's CSS will give you the clue.  -- HINT:  If you save the page http://redlettermedia.com/ to your desktop, then view in browser, you see that the brightening effect is still there.  This means that all the scripting necessary to reproduce the effect has been saved to the desktop.  Just inspect the source files to see how it was done.

    Reply
  • Posted by Robert McDougal Feb 10th 2013

    Thanks, but it seems to not be working. I added this to my custom modifier box and when I hover over those icons, they still don't bright up. :(

     

    .socialmedia-buttons img.fade:hover {
        opacity: 0.8 !important;
        -moz-opacity: 0.8 !important;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        transition: all 0.2s ease;
    }
    Reply
  • Posted by Sarah Fan Feb 10th 2013

    Check the entire CSS file social_widget.css.  I added the code above to a test template and included the entire CSS code to the header, and it worked. Make sure that any links in the code have the full HTTP://.... address entered.  Some code assumes that you are in the root directory of its server, such as any Spruz link to an image.

    I don't have time atm to look at the coding.. I will later.

    Reply
  • Posted by Feb 10th 2013

    Okay -- First download the webpage you are interested in to your desktop, so you have access to the code and can change it.  If you mess up, just delete and download again:  http://redlettermedia.com/.

    Then set up a template like this in Notepad or other editor:

    Now enter a test code between the body tags:

    We will cut and paste the entire CSS code from social_widget.css between the header tags, then look at which ones seem to apply, and and which we can eliminate.

    Three classes seem to apply to the code:

    • socialmedia-buttons
    • smw_left
    • fade

    Examine the CSS you have pasted in the head, and eliminate all that don't seem to apply.  Then see if your test page still works.  But if you take a close look at the classes involved, it seems you will have to keep most of the code.  It's just a case of experimenting with the CSS until you get what you want.  You may have to link to or import a separate CSS file to deal with it.  But at this point you should be asking yourself if your site isn't becoming over-scripted.

     

     

     

     

    Reply
  • Posted by Sarah Fan Feb 10th 2013

    The discussion seems to be malfunctioning, so I had to link the images to my own site.  This is how Red Letter does the CSS link:

    <link rel="stylesheet" type="text/css" 
href="http://redlettermedia.com/wordpress/wp-content/plugins/social-media-widget/social_widget.css" />

I was going to edit the previous code to point to your Facebook page, but the malfunctioning discussion page has shut me out -- sorry.
What I am doing is just showing you how to analyze a situation like this.  It's just a simple CSS hover configuration.

Tip: The :hover selector can be used on all elements, not only on links.


Try this with just the image alone, and you'll see what's happening here:

    Your links and images are children of td.element-row1, so:

    td.element-row1 div table td img{opacity:0.7;}
    td.element-row1 div table td img:hover{opacity:1.0 !important;}

    Now go to http://ardentsouls.spruz.com   and mouse over the images in "Member Activity."  Watch the images light up.  They are all child elements of td.element-row1.

    It's that simple... 

    Reply
  • Posted by Randy Feb 11th 2013

    @Robert, I believe you know how to get the individual id for that element if I remember right, so just get the unique ID, add img to the end of that ID, 
    and then add the desired opacity to it. 

    Example #element19930982339 img{
    opacity: 0.8
    }

    I'm not certain that will work, but there is a very good chance.

    Reply
  • Posted by Robert McDougal Feb 16th 2013

    Thanks, well I combined both suggestions and it worked.

    Reply
  • Posted by Sarah Fan Feb 16th 2013

    Looks nice... 

    Reply
Next
1 2
Please Sign In to Add a Comment
or

This website is powered by Spruz