Is it possible to add a zoom on the portfolio thumbnails as a hover effect and to style the text parts like the attached screenshot? Eg. On two lines with two different sizes.
Unfortunately using the default portfolio item gallery is not possible to zoom the images on hover, there are many images that will be loaded for different sizes of the devices does not allow this feature to be applied.
I have asked Arlind for a custom code as the CSS I was trying to apply was not working properly, can you please try adding the CSS below to Custom CSS:
I have asked Arlind for a custom code as the CSS I was trying to apply was not working properly, can you please try adding the CSS below to Custom CSS:
Hi,
Is it possible to add a zoom on the portfolio thumbnails as a hover effect and to style the text parts like the attached screenshot? Eg. On two lines with two different sizes.
Cheers,
Jake
Hi Jake,
Unfortunately using the default portfolio item gallery is not possible to zoom the images on hover, there are many images that will be loaded for different sizes of the devices does not allow this feature to be applied.
Best regards,
Laborator Team
Hi Art,
What about styling the text like in my design. Is that part possible?
With the zoom on hover. Would it be worth briefing WP Kraken to see if they could help?
Or a plugin that would add this feature?
Cheers,
Jake
Hi Jake,
I have asked Arlind for a custom code as the CSS I was trying to apply was not working properly, can you please try adding the CSS below to Custom CSS:
.thumb .item-link .image-placeholder img { -webkit-transition: -webkit-transform 250ms ease-in-out; transition: -webkit-transform 250ms ease-in-out; -o-transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } .thumb:hover .item-link .image-placeholder img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }Sorry for the inconvenience.
Best regards,
Laborator Team
Hi Jake,
I have asked Arlind for a custom code as the CSS I was trying to apply was not working properly, can you please try adding the CSS below to Custom CSS:
.thumb .item-link .image-placeholder img { -webkit-transition: -webkit-transform 250ms ease-in-out; transition: -webkit-transform 250ms ease-in-out; -o-transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } .thumb:hover .item-link .image-placeholder img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }Sorry for the inconvenience.
Best regards,
Laborator Team
Hi Art,
That's amazing! Thanks so much!
I put it in and got a couple of error alerts but managed to clean them off with the following edited code...
.thumb .item-link .image-placeholder img {
-webkit-transition: -webkit-transform 250ms ease-in-out;
transition: -webkit-transform 250ms ease-in-out;
-o-transition: transform 250ms ease-in-out;
-webkit-transform: 250ms ease-in-out;
}
.thumb:hover .item-link .image-placeholder img {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
Works well! https://www.brandexpression.com.au/projects/
Thanks again!
Jake
Glad to hear that Jake, have a great day
Best regards,
Laborator Team
Wahey! Brilliant, just what I was looking for. Cheers!