Disable rollover image zoom

Posted in: Newspaper
Post count: 30

In Big Grid 1 in Firefox/Chrome there is a rollover zoom effect on the image. In Safari it is just an opacity change. How can I change it so that Firefox/Chrome only uses the opacity change without the zoom effect?

Thanks

Post count: 30

Would also like to know how to disable the opacity change as well in case my client changes their mind.

Thanks.

Post count: 20688

Hi,

These would be the styles available for big grids
https://demo.tagdiv.com/newspaper/big-grid-1/
I believe you are referring to style 6 (lightsky) which uses a background color with opacity over the images, also a rollover effect.

I tested with a mac and Safari browser, the lightsky effect seems to work same as in Chrome or Firefox. I believe the mac uses High Sierra OS and latest Safari that comes with it.

If you don’t want a lightsky effect and opacity maybe consider to use a flex grid, Flex grid 2 is similar to big grid 1
http://prntscr.com/lj3rb6
You can center the post meta, and the result is the same as big grid style 6, with no opacity and lightsky.

Thanks

Post count: 30

that doesn’t really do anything, and in fact is worse.

Flex Grid 2 has the zoom effect in Safari as well. I’m trying to get rid of any rollover effect. Isn’t there a way to disable it using CSS?

thanks

Post count: 30

.td-grid-style-1.td-hover-1 .td-big-grid-post:hover .td-module-thumb .entry-thumb {
transform: scale3d(1.0, 1.0, 0);
-webkit-transform: scale3d(1.0, 1.0, 1);
-moz-transform: scale3d(1.0, 1.0, 1) rotate(0.00deg);
}
/*GET RID OF HOVER EFFECT ON BIG IMAGES*/
.td-grid-style-1.td-hover-1 .td-module-thumb a:last-child:before {
background-color: rgba(0,0,0,0.01) !important;
transition: background-color 99.9s ease !important;
-webkit-transition: background-color 99.9s ease;
-moz-transition: background-color 99.9s ease;
-o-transition: background-color 99.9s ease;
}

Post count: 20688

Hi,

The zoom can be disabled in the grid settings – https://www.screencast.com/t/XSjCBVnmA
So if you don’t want this effect, disable it.

A code solution as you mention would work just as well. Either use the default big grid with additional CSS, or the flex grid with the hover setting disabled.

The rollover effect is also a setting in the flex grids, so it can be enabled/disabled
https://www.screencast.com/t/uzxZrgzWp

Thanks

Post count: 30

Thanks.

Might consider adding that to your documentation, at least that there are big differences in setting options between Grid options.

Post count: 20688

Hi,

We are currently working to improve the theme and composer documentation. Sorry for the inconvenience. Please let us know if you have more questions.

Viewing 8 posts - 1 through 8 (of 8 total)
The forum ‘Newspaper’ is closed to new topics and replies.