Logo Overlay on Hover

corpuzrob

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

tomnovy

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');
}

corpuzrob

@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!

corpuzrob

P.S. The css is under "entire site" and the image is a png.

leftquark

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?

corpuzrob

No, that's just the opacity fade I had set up previously. The overlay logo I want is different: with a yellow glow.

leftquark

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;
}

corpuzrob

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!

leftquark

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;
}

Darter02

That's neat. I see it does sort of a "shimmy" as it transitions. What causes that?

corpuzrob

@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)

corpuzrob

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

corpuzrob

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

corpuzrob

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' Mike

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

denisegoldberg

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

corpuzrob

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.

sdb

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.

corpuzrob

Thank you @SDB!

sdb

Hi Rob, it works now