Docs

[imbrettjackson]

Hi, gang! Two questions…

1) When I roll over the the thumbnail images on my portfolio page they rollover state appears to glitch the image, maybe resize it quickly or do something else that makes that button state look jumpy. Any idea why this is happening?

http://www.ebj16.dreamhosters.com/

2) I’d be interested in changing the color and the opacity of the rollover state away from the current 50% black. Any idea where I can adjust this?

Thanks again!

[imbrettjackson]

Actually, let me add a third. (As long as you’re already giving of your time and expertise so generously!)

3) The sticky footer (which I want and love) covers the bottom options of the portfolio. How can I put a spacer or something down beneath the portfolio options so when the user has scrolled all the way down, the footer isn’t covering any of the thumbnails or their descriptions?

Thanks guys!

[Rue Nel]

Hello There,

Thanks for writing in!

#1] To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.entry-featured .entry-thumb img {
  -webkit-backface-visibility: hidden;
}

#2] To change the color and the opacity of the rollover state, you need to use this code. Feel free to change the color and make sure to adjust the opacity (from 0 to 1) as well.

.entry-featured .entry-thumb{
  background-color: red;
}

.entry-featured .entry-thumb:hover img{
  opacity: 0.75;
}

#3] And to make sure that the footer will not cover the content area, you can make use of this code

.page-template-template-layout-portfolio .site > .x-container.max.width.offset {
  margin-bottom: 160px;
}

Hope this helps. Please let us know how it goes.

[imbrettjackson]

Partial success! Thanks for #2 and #3! They both worked great. (But what’s that black circle in the middle of the rollover? Can I remove it? Fill it with some interesting text?)

#1 not so much. The rollover is still jumping. Any ideas?

[Christian]

To remove the circle, please add the code below in your Appearance > Customize > Custom > CSS

a.entry-thumb:hover:before {
    display: none;
}

Can you give us a screencast of the what’s happening with the roll over on your end?

Thanks.

[imbrettjackson]

Totally. Take a look.

Everything’s a little slowed-down because the screencast was boggy, but you can see how the rollover image shrinks before snapping into place.

Any notions of how I can fix this?

[Rupok]

Hi there,

Thanks for updating. I can’t see such issue on your page. Here goes a screencast on my end – http://recordit.co/BkvraALuRd

Kindly check from a different browser.

Cheers!

[imbrettjackson]

I appreciate that it works on your browser (and I continue to appreciate your assistance) but it doesn’t work on the newest version of Firefox. I don’t think I can leave the portfolio glitchy for quite that big of an audience. Any other ideas?

[Zeshan]

Hi there,

Thanks for updating the thread!

I’ve checked your site on Firefox on Mac, and I can replicate the issue, but it’s intermittent. It happens the first time when we hover over the image and doesn’t when hover over again. Can you try adding this CSS under Custom > CSS in the Customizer and see if the issue resolves:

a.entry-thumb:before {
    display: none;
}

Thank you!

[imbrettjackson]

Yes! I’m getting the same effect – It happens the first time when we hover over the image and doesn’t when hover over again. Even with the new code added. Thank you for chasing this bug so doggedly.

[Darshana]

Glad we could help 🙂

[imbrettjackson]

No, sorry to be unclear. I’m still getting the same bug – It happens the first time when I hover over the image and doesn’t when hover over again. The new code didn’t help.

[Zeshan]

Hi there,

Sorry for the confusion! I’ve checked a few things but couldn’t see the exact cause of the issue. Can you try adding this CSS code under Custom > CSS in the Customizer:

.page .entry-featured .entry-thumb img {
  width: 100%; 
}

See if it helps.

Thank you!

[imbrettjackson]

Nope. Sorry. Didn’t fix the glitch.

Let me add an additional piece of data – just to see, I also removed ALL the CSS and all the JavaScript, and the glitch still persists.

[Rue Nel]

Hello There,

I am another staff checking on this topic. I can’t seem to replicate the issue again on my end. Could pleas try to clear your browser’s cache or use Firefox private browsing mode or Chrome’s incognito mode and test your site again.

http://prntscr.com/as0cxt

Meanwhile, I noticed that this is a JS error on the page. Upon checking, you need to update your JS code and use this instead:

//Remove sorting menu
jQuery( document ).ready(function() {
 jQuery('.x-portfolio-filters').click();
});

//Took all three lines to work
jQuery( document ).ready(function() {
 jQuery('.x-portfolio-filters').click();
});

//Not sure which thing does which.
jQuery( document ).ready(function() {
 jQuery('.x-portfolio-filters').click();
});

Please be very careful with the single quotes. A wrong quotes could potentially generate error and could messed up the site.

Hope this helps.

[Author]

Posts