Summery Box need scale on Hover

Hi,

Scale whole item or scale image only?

On 10/18/2023 at 12:55 AM, tuanphan said:

Hi,

Scale whole item or scale image only?

Hi Tuanphan,

we need it on the whole item. We were not able to do this. 
 

thanks

On 10/21/2023 at 2:04 PM, Frick74 said:

Hi Tuanphan,

we need it on the whole item. We were not able to do this. 
 

thanks

Can you share link to your page where you use summary box?

Hi Tuanphan,

we managed to enlarge the items on hover in the summary. You can find an example on this page, scroll all the way down to the end of the page and you find the summary.

https://www.kentin.net/cases/40jaar-adrizoon

The problem we have is with the masonry blog section. We can't target the specific classes. You can find an example of a page overhere.

https://www.kentin.net/cases?tag=selected

The summaries on the pages are created with a combination of categories and tags.

The masonry blog section are only created with tags.

It is a pretty complicated setup with the categories and tags, but it works, but the css targeting isn't working.

In the attachments there are some screen dumps of the summary and masonry blog.

Thanks!

ps: if you have any questions please let me know

With Masonry, difficult to do scale, if you use transform scale, it will break layout (Masonry used transform: translate to build layout, if you use transform scale, it will override transform translate and layout will break)

You can try, you will see problem

div.blog-masonry article:hover {
    transform: scale(1.05) !important;
    transition: .5s;
}

Thanks Tuanphan,

I appreciate it and it's clear to me what the problem is. 

I used 'scale' to get a similar effect, it's isn't perfect like 'transform: scale, but if gives the hover some movement. I can only use it with a small amount, because it isn't working from the middle, I thinks it's scales from the top-left of the total masonry.

div.blog-masonry article:hover {
  scale:1.002;

}

Thanks again

Kind regards