Lay Theme Forum

@peterroden said in I want to create a thumbail grid but with images and not projects:

I like the hoverimage effect on the project thumbnails where it scales up a bit on hover. How do I add that to the element grid?

that is just for the project thumbnails. you'd need to do a transform: scale(1.1); transition for example

I have added a border to the grid elements using CSS however this seems to have broken the grid columns. You can see that if there is not a multiple of 3, the last image in the grid scales across all 3 columns instead of keeping the same size. https://leightonspace.co.uk/brainmarrow/test/

maybe try a 1px box shadow instead of a border
also the padding you added makes the boxes bigger than they're supposed to be so they dont fit in

you added this css. and it makes the elements get too big because you use flexbox i think:

.element-wrap {
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #2C56A2;
padding-left: 16px;
padding-right: 16px;
padding-top: 16px;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: column;
-webkit-box-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
}

best to dabble around with the css and learn about flexbox

The element grid is not scaling in the same way responsively as the thumbnail grid.

for me it does scale

I cannot get my text animation on the artist name hoverstate to work. On the project thumbnail version I have a cool hoverstate animation that changes the font. I cant get that to work on the element grid.

you probably need to target the parent container like

.element-wrap:hover .caption{

}

instead of

.caption:hover{

}

Haven't tested out but you can try to:

Include the Lottie library in your project via CDN Link <script src="lottie.min.js"></script>

Give the row you would like to assign the animation to a class oder id (e.g. #animation-container)

<script> window.laytheme.on("newpageshown", function(){ const animationContainer = document.getElementById('animation-container'); // replace with your div ID const animationData = { container: animationContainer, renderer: 'svg', loop: true, autoplay: true, path: 'your-animation.json' // replace with the path to your Lottie JSON file }; const animation = lottie.loadAnimation(animationData); }); </script> Add this to your Custom CSS #animation-container { background-image: url("data:image/svg+xml;utf8," + encodeURIComponent(animationData.container.innerHTML)); }

to make the created SVG your background-image

Good luck ;)

Dear Peter @peterroden

Do you have any cache plugins installed? Are you able to test this behaviour in an incognito window after the steps Armin mentioned above?

If still not working: Please send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

Talk soon & best wishes ✨ Richard

Dear @peterroden

Currently a video cannot be selected for use with Imagehover,
However on the thread below there is some information that may help you achieve a similar result.

http://laythemeforum.com:4567/topic/6128/image-hover-make-html5-video-instead-of-gif/2

Best wishes and have a wonderful day :)

Richard

if u visit ur website via
https://kaiblamey.com/

it throws these errors

if u visit it via

http://kaiblamey.com/

it works

maybe just disable https altogether so when ppl go to https, they are just redirected to http

Dear @peterroden
you could put a very long image inside or three images in each row and each of those images links to the same project.
Best!

Marius

Dear @peterroden
you can have a look into mailchimp and ninja-forms. For the other two it is probably trial-and-error.

Best!

Marius

Hey peter, please update to 1.7.2, then it should work again

Cool! :+1: