I have the big grid full and then 3 columns of blocks of articles on my homepage, really like it, but need to make the images animated to give the visitor some feedback, i.e. show that it is clickable. Some of the other blocks have this in a ‘zooming’ animation which works, can I add this to the blocks I’m using?
Could code something myself, but would rather make use of the theme if poss.
Thanks!
Hello rightpalava,
Unfortunately, our theme does not have any such an option that allows you to add some animation to your Big Grids, sorry! You can try using a GIF image as featured image to your posts and check the results.
Hope this helps!
Thanks for your message!
Hi Catalin – when I say animation – I mean a mouseover effect, so a gif won’t help! Some of the other blocks have a css hover effect, I’d like to add that to the blocks I’m using – is there an existing class I can add?
Hello man,
Try to check the following option from Theme panel and check if it turned off or on, like this -> https://www.screencast.com/t/47zpFkdTymS
Thanks for the message!
Thanks but that’s just a loading effect. If you look at the homepage of badgergp, you’ll see all the image thumbnails, but when you hover over them, besides the cursor changing there isn’t an effect to show the user that it’s clickable.
Make sense?
Hello rightpalava,
Unfortunately, I do not exactly understand what you mean through loading effect, sorry! Do you are referring to this effect which is available only for Big Grids, like this -> https://www.screencast.com/t/dwGxN0yxL If yes, you should check if your option Fade(Full) is active from your Theme Panel because otherwise, this effect will not work as expected.
If is not what you mean, please provide more details so I will be able to provide a more accurate response.
Thanks for your understanding!
Don’t worry – written my own CSS for this, if you visit BadgerGP.com now you’ll see that the 3 columns of thumbs now zoom in subtly on hover so the visitor knows it’s a link.
Added a class called bdgrhover to the block and then this custom css in the theme panel.
/* Animation */
.bdgrhover .td-module-thumb a img {
transform: translateZ(0);
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
transition-property: transform; }
.bdgrhover .td-module-thumb:hover a img { transform: scale(1.1); }
.bdgrhover .td-module-thumb:focus a img { transform: scale(1.1); }
.bdgrhover .td-module-thumb:active a img { transform: scale(1.1); }
