Im creating a demo to get used to layer slider. I created a box using the html layer and put a icon and text layer on top. When i put a hover effect on the box the icon and text disappears. I have messed with adding a hover effect to all the layers and z-index also with different positions for example relative, absolute......
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
You can position layers over/under each other by rearranging them in the layers list. The one in the top will be over the others, and so on.
As for the hover, you can disable the Always on top option in the Hover Transition tab, so the layer does not change priority when hovered over.
Thank you for the response!! One more question how can I add a css linear gradient to the background images. Also I made a divider with the html layer. But when screen sizes change the divider does moves away from the column it's attached to . How could i prevent
You can apply CSS globally on the slider in the Slider Settings -> Appearance -> Custom slider CSS field.
I'd recommend positioning layers with percentages instead of pixels. That way, they will always keep their relative positions on all screens and sizes.
unfortunately only one of your solutions work, very disappointing. Please find attachments below. The linear gradient will show up but fade out. The icon is on top now but does not move with box.please visit https://www.vrcutready.com/ to see.
okay... so how can set the gradient on top?? can you please be more clear. Which layer do I set "Calculate positions from" option to "Sides of the screen". I assume the bottom layer and have the icon placed with the setting "always on top". It's still not working
No worries man. My apologies I should of been more clear. Please find attachment of results im looking for. I would like a hover box with icon and text on top . So when you hover, the box will rise up on the y-axis and the icon and text are fixed to the box
Could you, please create me a temporary wp-admin access? I would like to create one of the boxes for you, maybe this would be better than trying to explain it.
Unfortunately, I had to use a single HTML layer for each individual "box" and all the content should be inserted inside that layer as custom HTML code. They could not be separate layers. This is important because you want to use the hover scale effect on the entire box with all the content inside.
I have created a clear example code for you, which you will hopefully be able to edit easily. You can change the title, sample text and image (you should copy the url of the selected image from your media library)
Thank you so much I see how you did this and totally understand. I don't know why it didn't dawn on me to use html layer as a gradient background. I literally did that for my last slide on the page for the input form. One last thing. How can i make it so the background and the linear gradient comes in at the same time. I took off the fade in on the linear gradient but the timing is still staggered with the background
I think that the best solution if you remove the image from slide background and use it as a normal image layer (should be under the linear gradient layer). Or - because you are using full-size slider - you should create a 100% x 100% HTML layer (instead of image layer) and put the image to the background of that HTML layer with using the following code inside the custom css field:
It works perfectly! this tool is such a game changer. You can literally make anything you want. Being able to export the html this with jquery plugin. I can create full stack applications and use this on the front end.
Im creating a demo to get used to layer slider. I created a box using the html layer and put a icon and text layer on top. When i put a hover effect on the box the icon and text disappears. I have messed with adding a hover effect to all the layers and z-index also with different positions for example relative, absolute......
Hello Alex,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
You can position layers over/under each other by rearranging them in the layers list. The one in the top will be over the others, and so on.
As for the hover, you can disable the Always on top option in the Hover Transition tab, so the layer does not change priority when hovered over.
You don't need to use z-index or CSS for these.
Thank you for the response!! One more question how can I add a css linear gradient to the background images. Also I made a divider with the html layer. But when screen sizes change the divider does moves away from the column it's attached to . How could i prevent
You can apply CSS globally on the slider in the Slider Settings -> Appearance -> Custom slider CSS field.
I'd recommend positioning layers with percentages instead of pixels. That way, they will always keep their relative positions on all screens and sizes.
unfortunately only one of your solutions work, very disappointing. Please find attachments below. The linear gradient will show up but fade out. The icon is on top now but does not move with box.please visit https://www.vrcutready.com/ to see.
Hello Alex,
The gradient won't show because you have been set a slide background image which is on the top of the gradient.
I recommend you to set the "Calculate positions from" option to "Sides of the screen" rather than Sides of the slider.
Best Regards,
George | Kreatura Dev Team
okay... so how can set the gradient on top?? can you please be more clear. Which layer do I set "Calculate positions from" option to "Sides of the screen". I assume the bottom layer and have the icon placed with the setting "always on top". It's still not working
The question is what do you want to achieve? A background image with a semi transparent linear-gradient-overlay?
Where exactly do you want to position the "crown" logo?
And - I'm sorry for the questions - where can I see any hover effect in your slider?
Best Regards,
George | Kreatura Dev Team
Geroge,
No worries man. My apologies I should of been more clear. Please find attachment of results im looking for. I would like a hover box with icon and text on top . So when you hover, the box will rise up on the y-axis and the icon and text are fixed to the box
Oh I see... and the box should have the semi transparent linear-gradient background?
Best Regards,
George | Kreatura Dev Team
yes like this
Could you, please create me a temporary wp-admin access? I would like to create one of the boxes for you, maybe this would be better than trying to explain it.
Best Regards,
George | Kreatura Dev Team
sure thanks George I appreciate it
vrcutready.com/admin
username:admin
password:Vision180
One (hopefully last :-) ) question:
All these boxes can be separate sliders and you will position them next to each other or this should be in one slider?
Best Regards,
George | Kreatura Dev Team
I was thinking all in in one slider what do you think will work the best
I created a slider for you, I hope that this was your original request.
https://www.vrcutready.com/wp-admin/admin.php?page=layerslider&action=edit&id=27#
Unfortunately, I had to use a single HTML layer for each individual "box" and all the content should be inserted inside that layer as custom HTML code. They could not be separate layers. This is important because you want to use the hover scale effect on the entire box with all the content inside.
I have created a clear example code for you, which you will hopefully be able to edit easily. You can change the title, sample text and image (you should copy the url of the selected image from your media library)
Best Regards,
George | Kreatura Dev Team
George,
Thank you so much I see how you did this and totally understand. I don't know why it didn't dawn on me to use html layer as a gradient background. I literally did that for my last slide on the page for the input form. One last thing. How can i make it so the background and the linear gradient comes in at the same time. I took off the fade in on the linear gradient but the timing is still staggered with the background
I think that the best solution if you remove the image from slide background and use it as a normal image layer (should be under the linear gradient layer). Or - because you are using full-size slider - you should create a 100% x 100% HTML layer (instead of image layer) and put the image to the background of that HTML layer with using the following code inside the custom css field:
background: url('your-image-url'); background-size: cover;
Best Regards,
George | Kreatura Dev Team
George,
It works perfectly! this tool is such a game changer. You can literally make anything you want. Being able to export the html this with jquery plugin. I can create full stack applications and use this on the front end.
George,
How can I import a slider from jquery-slider-plugin to word press. I compressed the file to a zip but it's transferring over?
As I can see my colleague has replied to you in the meantime. Please see the other ticket for the answer: https://kreatura.ticksy.com/ticket/2107351
Best Regards,
George | Kreatura Dev Team