Change Portfolio Image Hover

CreeperArt · April 2019

Hey!

How can I change the hover effect on a portfolio image in the "Masonry Hover Details" layout? At the moment it shows the title at the top left corner. Additionally it shows a search icon in the bottom left corner and a link icon on the bottom right corner? How can I remove them because I think they are really unnecessary. It's clear that it's a link if you click on it you will see more information and pictures anyway, so there's no reason for the search icon.

It would also really be great if it would show the title centered on the image and if I would be able to change the hover color.

Moreover the images do not auto-adjust to the grid size of the portfolio. Do you know how I can fix this problem?

I really hope you can help me with that!! :-)

Best regards,

Benny

Pablo · April 2019

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.

thanks

CreeperArt · April 2019

Hi Pablo,

thank you for your answer! Sorry, I forgot about that. Here ist the link to my website:

http://benedikt-falkenstein.de/

Pablo · April 2019

1) Centering that title is not possible.

It require theme files customzations and we do not support such theme customizations.

2) The hover color can be changed with that code below, paste it into the Theme Options > Custom CSS & JS > CSS

.portfolio_group.masonry-hover .portfolio-item .masonry-hover-wrapper .hover-desc{
	background:rgba(255,0,0,0.2) !important;
}

3) Use this code:

body.page-id-112 img.scale-with-grid, #Content img{
	width:100% !important;
}

Thanks

CreeperArt · April 2019

Thank you for your answer Pablo, that helps me a lot!!

But is it still possible to remove the search and the link icon from the portfolio hover or does this also require theme customization?

CreeperArt · April 2019

And I have one more question according the portfolio:

How can I get the spacing between the images to be the same on the horizontal and vertical axis? As you can see on the pictures, the gap is always bigger on the vertical axis in the middle. It would be much nicer if the size is all the same.

Pablo · April 2019

To remove the icons on the bottom, please use this code:

.portfolio-item .links-wrappper{
	display:none !important;
}

It's not possible to change the spacing - that's because the javascript manages it.
It calculates sizes of the images and it's placing it in the proper place.
So changing it with the CSS could make this script work badly.

Thanks

CreeperArt · April 2019

Okay, again, thank you!!!

And one last question (sorry for asking so much):

Is it now possible to make the whole portfolio image (I guess the class is "portfolio-item isotope-item has-thumbnail") a like to the page? So that you can click everywhere on image and not just on the titel to get to the page?

And in which file can I edit the javascript of the portfolio? I guess I'm not able to change the spacing but a least I would like to take a look at it :-D

Pablo · April 2019

Unfortunately, it's not possible to attach the whole image to be 'clickable' - you would have to edit theme files to achieve that.

Through the theme options, it's not possible.

I suggest, to check the js folder in the main directory of the betheme.

Thanks

CreeperArt · May 2019

" Unfortunately, it's not possible to attach the whole image to be 'clickable' - you would have to edit theme files to achieve that.

Through the theme options, it's not possible. "

____________________________________________________________________________

Hi Pablo, I want to edit the theme files in order to make the whole overlay in the "Masonry Hover Details" Portfolio Layout clickable and a link to the portfolio page. Can you please tell me where I can find the right file to edit?

I mean it's just no option that you have to click particularly on the text on the overlay to get to the specific portfolio page.

Thank you!!!

CreeperArt · May 2019

Moreover how can I remove the line under the titel on "Masonry Hover Details" Layout?

Pablo · May 2019

1) Sorry, but we do not offer theme files customization support.

But, I suggest to start looking in the single.php file - it should direct you to next files.

2) You mean the underline on category in jquery filtering, right?

Thanks

CreeperArt · May 2019

2) No i mean the line on the hover-titel in "Masonry Hover Details". On the picture you can see the line I mean.

Pablo · May 2019

Please use that CSS

.portfolio_group.masonry-hover .portfolio-item .masonry-hover-wrapper .hover-desc h3::after{
	display:none !important;
}

thanks

CreeperArt · May 2019

Thank you!!

Change Portfolio Image Hover

Comments