Hover Transitions on Portfolio Image

Digiwool · December 6, 2018, 12:01am

Hi there,

I’m working on this site: https://tarasolaoutdoorliving.com and I’ve put in some code to zoom, turn to greyscale and reduce the transparency of the Woocommerce featured products thumbs on hover, which works great, and now I’d like to do the same for the Portfolio thumb images.

This is the code I used for the featured products but I can’t adapt it to work with the Portfolio thumb images:

.entry-featured img {
  filter: none; /* IE6-9 */
  filter: grayscale(0); /* Firefox 35+ */
  -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */
  transform: scale(1); 
  transition: 0.5s all ease-in-out;
    opacity: 1;
}

.entry-featured img:hover {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  transform: scale(1.02); 
  transition: 0.5s all ease-in-out;
    opacity: 0.75;
}

I’m using Renew and used Renew Demo 5 for the initial set-up.
Your help greatly appreciated.
Cheers,
Matthew

ruenel · December 6, 2018, 3:19am

Hey Matthew,

Thanks for posting in!

Do you want to remove the overlay of the portfolio items in the portfolio page so that the css code will take effect? Well in that case, simply add this nifty css:

.x-portfolio .entry-cover {
  display: none;
}

Please let us know if this works out for you.

Digiwool · December 6, 2018, 2:05pm

Hi RueNel,

I so wanted that to work! But it hasn’t I’m afraid. I put an !important; on it and it still didn’t work.

Any ideas?
All the best,
Matt

basanta · December 6, 2018, 3:43pm

Hi Matt,

Thanks for the details!
Can you please try this CSS and let us know if that help!

.x-recent-posts .x-recent-posts-img:after, .x-recent-posts .x-recent-posts-img:before {
display: none !important;
}

Hope this helps!

Digiwool · December 6, 2018, 3:53pm

Hi basanta,

Thanks for that, it’s stopped the overlay okay, but I want the hover to do the same as the code in the my first post ^^^^^, like it does for the featured product images, where the portfolio image zooms in slightly, fades and turns greyscale.

Thanks for your help.
Cheers,
Matt

basanta · December 6, 2018, 4:42pm

Hi Matt,

Just add this css too!

.x-recent-posts .x-recent-posts-img:hover {
filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  transform: scale(1.02); 
  transition: 0.5s all ease-in-out;
    opacity: 0.75;
}

Hope this helps!

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Digiwool · December 6, 2018, 4:57pm

Great thank you for the code and links basanta, appreciated.

So that code makes the portfolio img react on hover, but I can’t make it ease back smoothly. I tried this code:

.x-recent-posts .x-recent-posts-img:after, .x-recent-posts .x-recent-posts-img:before {
  filter: none; /* IE6-9 */
  filter: grayscale(0); /* Firefox 35+ */
  -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */
  transform: scale(1); 
  transition: 0.5s all ease-in-out !important;
    opacity: 1;
}

Can you help me fix this please?

Also, on hover, I get an alt type tag appear at the mouse pointer that says: ‘Permalink to: “Commercial Project 3”’.
How can I remove this please?

Many thanks as always,
Matt

basanta · December 6, 2018, 5:09pm

Hi Matt,

Thanks for updating the thread!

You can use this CSS.

.x-recent-posts .x-recent-posts-img  {
 
  transform: scale(1); 
  transition: 0.5s all ease-in-out !important;
    opacity: 1;
}

Hope this works.

Digiwool · December 6, 2018, 5:13pm

Perfect, thanks basanta.

Also, on hover, I get an alt type tag appear at the mouse pointer that says: ‘Permalink to: “Commercial Project 3”’.
How can I remove this please?
Thanks,
Matt

ruenel · December 6, 2018, 8:13pm

Hello Matt,

To remove the “Permalink to: …” in your recent posts element, please add this JS code in the X > Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
  var elements = $('.x-recent-posts a');

  for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].removeAttribute('title');
  }
})(jQuery);

Please let us know if this works out for you.

Digiwool · December 6, 2018, 8:20pm

Hi RueNel,

Thank you, that’s perfect. Can I ask two more things please?

When the two below pages load, there is a line space between the bottom of the header and the first line of text: “<< Back to Projects”. But if you scroll the page to the bottom, then scroll back up, the line space disappears and the text is against the bottom of the header — can you please help me retain the line space?

https://tarasolaoutdoorliving.com/residential-projects/
https://tarasolaoutdoorliving.com/commercial-projects/

In each single product page, at the bottom of the page, the titles of the Related Products are cut off — could you please help me display the full Related Products titles?

Many thanks,
Matt

ruenel · December 7, 2018, 1:30am

Hello Matt,

Thanks for updating in!

1.) You are having this issue because of your navbar settings. Please go to X > Theme Options > Header > Navbar and set the “Navbar Top Height” to 95 pixels because this is the actual height of your navbar.

2.) To resolve the cut off related title in your single product page, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce .upsells, 
.woocommerce .related, 
.woocommerce .cross-sells {
    margin-bottom: 0;
}

We would loved to know if this has work for you. Thank you.

Digiwool · December 7, 2018, 1:50pm

Hi RueNel,

Yes brilliant thank you that worked.

I have a couple more queries if I may please?

On the portfolio index pages, I have the thumbnails quite large but they are slightly blurry on a large screen. Is there a way to fix this like you can with blurry product thumbnails? Example of blur: https://tarasolaoutdoorliving.com/residential-projects/
The gallery images in some of the single products aren’t dislayed in a tight grid and there are sometimes only one image in a row which looks untidy. I realise this is because the images are of differing sizes, but is there a way to fix it so they are all fixed to a grid?
Examples: https://tarasolaoutdoorliving.com/product/tarasola-decor/
https://tarasolaoutdoorliving.com/product/tarasola-decor/
The body font on the single product pages appears to be different to the body font in the rest of the site — might just be the weight, I’m not sure. How can I fix this please?
Example of product: https://tarasolaoutdoorliving.com/product/tarasola-cubic/

Many thanks,
Matt

rad · December 7, 2018, 6:04pm

Hi Matt,

The image is cropped to around 800px, and viewing it on a larger screen while making it responsive with no container will stretch the image and will become more blurry. I also noticed that it’s added to a text element, have you added a custom shortcode for recent posts? I can’t verify it since the credential does not have admin capability.

But, I recommend turning on your row’s inner container to make sure it’s not going to stretch full width.

The purpose of the inner container is to make sure the content doesn’t go all the way equal to the screen size. Even if you’re able to fix the quality but it’s viewed to the much even larger screen then it’s still the same. Fixing the quality requires bigger image dimension too, and that’s going to a problem with loading performance of the page.

Please add this CSS as well

    .gallery-columns-3 .gallery-item:nth-child(3n+1) {    
    clear: left;
}

As for the size, the only solution is uploading images with the same aspect ratio or size. They are pulled from the media gallery with its own original sizes.

I checked and they are the same font name, size, and color on my end. But maybe it looks thinner due to the background color which almost blends with the text color. You can try changing this custom CSS to find the proper color combination.

.woocommerce div.product .summary {
    background-color: #f7f7f7 !important;
    padding: 20px !important;
}

Thanks!

Digiwool · December 10, 2018, 11:36am

Hi Rad,

Brilliant, thank you for all of that, all sorted now.
Thanks as ever.
Cheers!
Matt

mldarshana · December 10, 2018, 1:22pm

Glad we were able to help

Digiwool · December 10, 2018, 1:42pm

Hi mldarshana,

Thanks for that. How can I make a portfolio page (single item) full screen width?

I’ve set the row with the top image in to No Container, but it’s still contrained: https://tarasolaoutdoorliving.com/portfolio-item/residential-project-1/

Thanks,
Matt

thai · December 10, 2018, 3:38pm

Hi There,

To make the single portfolio page full width, please add this custom CSS under Theme Options > CSS:

.single-x-portfolio .x-container.max.width.offset {
    width: 100%;
    max-width: 100%;
}

Hope it helps

Digiwool · December 10, 2018, 10:01pm

Perfect, thank you.
Cheers!
Matt

paul.r · December 11, 2018, 9:51am

On behalf of my colleague, you’re welcome. Cheers!