Logo Overlay on Hover

corpuzrobcorpuzrob Registered Users Posts: 77 Big grins
edited September 3, 2014 in SmugMug Customization
Hi,

I'd like to make my logo switch to a slightly different image when hovered on/during mouseover. The overlay image would be exactly the same size: just some color changes. You can see an example of what I would like to do at my blog:

http://blog.robcorpuz.com/

If you hover over the logo there, it changes color. I want to do something very similar on my smugmug site. Can anyone help me? Thanks so much!

-Rob

Comments

  • tomnovytomnovy Registered Users Posts: 1,101 SmugMug Employee
    edited September 3, 2014
    Hi Rob,

    You could do this by doing little bit of CSS coding to your site to have a nice hover effect. You will need to upload the second version to one of your galleries and then get a link to the file.

    Add a CSS content block to your ENTIRE SITE section and then add this code to it:

    .sm-page-widget-logo .sm-page-widget-logo-img, .sm-page-widget-logo .sm-page-widget-logo-img-retina:hover {
    background-image: url(‘link-to-your-image.png');
    }
    SmugMug Support Hero | Customizer | My SmugMug site - http://www.photom.me | Customization Portal - https://portal.photom.me
  • corpuzrobcorpuzrob Registered Users Posts: 77 Big grins
    edited September 3, 2014
    @tomnovy Hey thanks for the reply! I just gave it a try but it didn't work.

    Maybe I'm not using the right link? I've got the second version in "my smugmug site files" and got the link by clicking the photo, then "share," then "get a link" and then selecting the "original" link under "photo links." I'd already re-sized the photo in photoshop so it should fit. Where did I go wrong?

    I thought it might also be because I had set the logo to fade on hover before, but when I temporarily deleted that bit of code, it still didn't work.

    Thanks again!
  • corpuzrobcorpuzrob Registered Users Posts: 77 Big grins
    edited September 3, 2014
    P.S. The css is under "entire site" and the image is a png.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 3, 2014
    corpuzrob wrote: »
    P.S. The css is under "entire site" and the image is a png.

    Looks like you got it working? For reference, your SmugMug page is at http://www.robcorpuz.com/, right?
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • corpuzrobcorpuzrob Registered Users Posts: 77 Big grins
    edited September 3, 2014
    No, that's just the opacity fade I had set up previously. The overlay logo I want is different: with a yellow glow.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 3, 2014
    This should do the trick. The key is adding !important to the background-image tag
    /* Change the logo when the mouse hovers over it. Make it fade in */
    .sm-page-widget-logo-img:hover {
      background-image: url('http://robcorpuz.files.wordpress.com/2014/09/behind-the-pupil-1c-alt-185px-log-50px-padding-570-width-lighter-blue-adjusted-yellow-accents.png') !important;
      -webkit-transition: background-image 0.25s ease-in;
      -moz-transition: background-image 0.25s ease-in;
      transition: background-image 0.2s ease-in;
    }
    
    /* When the mouse goes away from the logo, slowly fade out to the original logo */
    .sm-page-widget-logo-img {
      -webkit-transition: background-image 0.25s ease-in;
      -moz-transition: background-image 0.25s ease-in;
      transition: background-image 0.2s ease-in;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • corpuzrobcorpuzrob Registered Users Posts: 77 Big grins
    edited September 3, 2014
    Fantastic! That did the trick, @leftquark, thanks so much! I had to remove some other icons I had set in the footer (using the content block) and replaced them with individual photos (they were, of course, turning into my main overlay logo on hover), but now I lost the fade on hover that I had set for all of them. How do I target the individual photos/icons in my footer and get them to fade a bit on hover? Thanks!
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 3, 2014
    corpuzrob wrote: »
    Fantastic! That did the trick, @leftquark, thanks so much! I had to remove some other icons I had set in the footer (using the content block) and replaced them with individual photos (they were, of course, turning into my main overlay logo on hover), but now I lost the fade on hover that I had set for all of them. How do I target the individual photos/icons in my footer and get them to fade a bit on hover? Thanks!

    You could probably put them all back to how they were and then just target the logo a bit better than my original code provided. I didn't realize there were other icons that were being effected -- oops!
     /* Change the logo when the mouse hovers over it. Make it fade in */
    #sm-page-widget-shDv5XvQ .sm-page-widget-logo-img:hover {
      background-image: url('http://robcorpuz.files.wordpress.com/2014/09/behind-the-pupil-1c-alt-185px-log-50px-padding-570-width-lighter-blue-adjusted-yellow-accents.png') !important;
      -webkit-transition: background-image 0.25s ease-in;
      -moz-transition: background-image 0.25s ease-in;
      transition: background-image 0.2s ease-in;
    }
    
    /* When the mouse goes away from the logo, slowly fade out to the original logo */
    #sm-page-widget-shDv5XvQ .sm-page-widget-logo-img {
      -webkit-transition: background-image 0.25s ease-in;
      -moz-transition: background-image 0.25s ease-in;
      transition: background-image 0.2s ease-in;
    }
    

    The other option, if you don't want to go back to what you had, is to stick with the page as it is now, and add this code (it was super tricky for me to figure out but luckily google is my best friend!)
    .sm-page-layout-region-bottom .sm-tile-content:hover .sm-image  {
      opacity: 0.6;
      /* Have the transparency fade in */
      -webkit-transition: all 0.15s ease-in;
      -moz-transition: all 0.15s ease-in;
      transition: all 0.15 ease-in;
    }
    
    /* Fade out the transparency. This code can be removed if you do not want it to fade */
    .sm-page-layout-region-bottom .sm-tile-content .sm-image {
      -webkit-transition: all 0.15s ease-in;
      -moz-transition: all 0.15s ease-in;
      transition: all 0.15 ease-in;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited September 3, 2014
    That's neat. I see it does sort of a "shimmy" as it transitions. What causes that?
  • corpuzrobcorpuzrob Registered Users Posts: 77 Big grins
    edited September 3, 2014
    @leftquark: Thanks for the help on this, Aaron, and in general, since I just realized that a lot of the code I've borrowed to customize my site I got from your page. That worked just fine. I decided to keep the single image blocks rather than go back and switch to the way it was.

    @Darter02: I'm not sure what causes the shimmy (maybe Aaron can tell you), but I think I like it)
  • corpuzrobcorpuzrob Registered Users Posts: 77 Big grins

    Hi Smuggers,

    I've noticed that this hover fade effect is no longer working. Not sure when it stopped, but I'm guessing it could have been in the last month or two, as I feel like I did notice it working fairly recently.

    This is my site: https://www.robcorpuz.com/ .

    I tried attaching the code I'm using here but it doesn't seem to be working.

    I don't believe I have done any CSS adjustments lately that would affect this, but it's possible that I've forgotten something. Thanks in advance for your help!

    -Rob

  • corpuzrobcorpuzrob Registered Users Posts: 77 Big grins

    Here is the code I'm using (in the "entire site" section), thanks to @leftquark and @tomnovy :

    .sm-page-widget-logo .sm-page-widget-logo-img, .sm-page-widget-logo .sm-page-widget-logo-img-retina:hover {
    background-image: url(‘http://www.robcorpuz.com/photos/i-BhT8sZZ/0/O/i-BhT8sZZ.png');
    }

    /* Change the logo when the mouse hovers over it. Make it fade in */

    .sm-page-widget-logo-img:hover, .sm-page-widget-logo-img:focus, .sm-page-widget-logo-img:active {
    background-image: url('http://www.robcorpuz.com/photos/i-2BVWqSb/0/O/i-2BVWqSb.png') !important;
    -webkit-transition: background-image 0.1s ease-in;
    -moz-transition: background-image 0.1s ease-in;
    transition: background-image 0.05s ease-in;
    }

    /* When the mouse goes away from the logo, slowly fade out to the original logo */
    .sm-page-widget-logo-img {
    -webkit-transition: background-image 1.05s ease-in;
    -moz-transition: background-image 1.05s ease-in;
    transition: background-image 1s ease-in;
    }

    .sm-page-layout-region-bottom .sm-tile-content .sm-image {
    opacity: 0.5;
    /* Have the transparency fade in */
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    transition: all 0.15 ease-in;
    }

    .sm-page-layout-region-bottom .sm-tile-content:hover .sm-image {
    opacity: 1;
    /* Have the transparency fade in */
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    transition: all 0.15 ease-in;
    }

    /* Fade out the transparency. This code can be removed if you do not want it to fade */
    .sm-page-layout-region-bottom .sm-tile-content .sm-image {
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5 ease-in;
    }

    -Rob

  • corpuzrobcorpuzrob Registered Users Posts: 77 Big grins

    Here is the code I'm using (in the "entire site" section), thanks to @leftquark and @tomnovy :

    .sm-page-widget-logo .sm-page-widget-logo-img, .sm-page-widget-logo .sm-page-widget-logo-img-retina:hover {
    background-image: url(‘http://www.robcorpuz.com/photos/i-BhT8sZZ/0/O/i-BhT8sZZ.png');
    }

    /* Change the logo when the mouse hovers over it. Make it fade in */

    .sm-page-widget-logo-img:hover, .sm-page-widget-logo-img:focus, .sm-page-widget-logo-img:active {
    background-image: url('http://www.robcorpuz.com/photos/i-2BVWqSb/0/O/i-2BVWqSb.png') !important;
    -webkit-transition: background-image 0.1s ease-in;
    -moz-transition: background-image 0.1s ease-in;
    transition: background-image 0.05s ease-in;
    }

    /* When the mouse goes away from the logo, slowly fade out to the original logo */
    .sm-page-widget-logo-img {
    -webkit-transition: background-image 1.05s ease-in;
    -moz-transition: background-image 1.05s ease-in;
    transition: background-image 1s ease-in;
    }

    .sm-page-layout-region-bottom .sm-tile-content .sm-image {
    opacity: 0.5;
    /* Have the transparency fade in */
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    transition: all 0.15 ease-in;
    }

    .sm-page-layout-region-bottom .sm-tile-content:hover .sm-image {
    opacity: 1;
    /* Have the transparency fade in */
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    transition: all 0.15 ease-in;
    }

    /* Fade out the transparency. This code can be removed if you do not want it to fade */
    .sm-page-layout-region-bottom .sm-tile-content .sm-image {
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5 ease-in;
    }

    -Rob

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    It seems to be working (logo changes color when hovered) for me on my daughter's Windows 8 laptop running Chrome, IE11 and Firefox.

  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator

    It works for me on Windows 10 in Chrome, Firefox, and Edge.
    Logo changes color on hover.

  • corpuzrobcorpuzrob Registered Users Posts: 77 Big grins

    Hi Mike & Denise,

    Thanks so much for your replies! I guess this must be specific to my computer (Macbook Pro), as I see that it is also working on a friend's Macbook Air. On mine, the hover effect doesn't appear in either Safari or Chrome (High Sierra 10.13.3). Have no idea why that could be.

  • sdbsdb Registered Users Posts: 101 Major grins

    Hi Rob,

    I tried on win 7 64bit:

    • Blog, it works both on Firefox 60.0 and IE 11
    • Website, on Firefox the logo disappears by hovering (take a look at the screenshot), on IE logo remains but doesn't change color like on the blog.

    Here on Firefox.

    Hope this helps.

  • corpuzrobcorpuzrob Registered Users Posts: 77 Big grins
  • sdbsdb Registered Users Posts: 101 Major grins

    Hi Rob, it works now :)

Sign In or Register to comment.