Hi guys,
I would like to have a nice hover effect on either a gallery or strip column that has text on it all the time. Image galleries are perfect but text only shows on hover or only on the bottom of the picture, where I want it to show all the time. I can put a button over a column but it is only allowed to go to the width of the column guidelines. Is there any thing I can do in code to achieve this?
I did hack a solution with a 3 column gallery with a pro gallery overlayed, but as soon as the screen width changed it resized and looked terrible.
An example of what I want is below on the Queensland box (on hover), but I want it the full size of the block and not a circle but a square, and responsive:
Thanks!
Hi,
Check out hover box. It might be exactly what you need.
https://support.wix.com/en/the-wix-editor/hover-box
You could also use a repeater to implement your own image gallery and program it according to your needs.
See more here
Thanks Ido but both those solutions are not responsive or full width. The repeaters end up going to the next line down on smaller screens, and hover boxes shrink on larger sccreens if I attach to columns (see below). Surely there is an answer for this??
This is the only way I have been able to do it for now…
https://citisonship.wixsite.com/fullwidthhoverbox
Hey Ido, do you know if we can change a column background on hover? This would help in this solution. Thanks!
Leighton, I know we got this somewhat figured out but I am trying to come up with a better solution, stay tuned:)
Hi,
It is not possible to change background color of a column element using code.
Roi
Hi Citionship, how have you managed to combine a hover effect with responsive columns?! I’m trying to do that on my site but with no luck. I can either have static images on columns that will resize or images with a hover effect, but not both??
Hey Nick,
So I have 4 strips…1 is the main one with the 3 images and “House” text. Then I duplicated it and deleted House 2 and 3 images and made the backgrounds transparent. I did the same for the other two strips. So on mousein over the Main Strip it shows the correct strip and so forth. Then add a hide on mouseout event to the hidden strip column. Hope that makes sense:) Attached is an image that hopefully helps…
Hi Citisionship
Thank you for your quick reply.
Is hide on mouseout something you need to add with code?
Yes, it is an event that you add to the 3 hidden stripcolumns. Same as mousein on the Main Columns to show the hidden strips.
@citisonship, Thanks for the great idea! I have been trying to implement it myself, but am running into some issues. I put a mousein on the mainstrip and, but everytime I mouse over in the preview it keeps blinking bath and forth between the orginal column and the new column that I want to appear. Am I doing something wrong?
@citisonship, I was playing around with it and got it to work properly ( the solution was to have mouseout be based on the new strip not the originals strip). Thanks again for the great idea!
Hey Guys, I have a new solution for this with only one strip and columns using background.src
Example: https://citisonship.wixsite.com/fullwidthhover
This is the code I used.
export function column1_mouseIn(event, $w) {
$w(“#column1”).background.src = “https://static.wixstatic.com/media/139b4f_7ebaaadd28b44070a8466691b3d5cfcd~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_7ebaaadd28b44070a8466691b3d5cfcd~mv2.png”;
$w(“#box1”).hide();
$w(“#box2”).show();
}
let flipOptions = {
“duration”: 600,
“direction”: “right”
};
export function column1_mouseOut(event, $w) {
$w(“#column1”).background.src = “https://static.wixstatic.com/media/139b4f_2f3f005dc86a427dabb7ac367172fb14~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_2f3f005dc86a427dabb7ac367172fb14~mv2.png”;
$w(“#box1”).show(“flip”, flipOptions);
$w(“#box2”).hide();
}
export function column2_mouseIn(event, $w) {
$w(“#column2”).background.src = “https://static.wixstatic.com/media/139b4f_ca6b89996ef348dcb007cd40c64f9160~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_ca6b89996ef348dcb007cd40c64f9160~mv2.png”;
$w(“#box4”).hide();
$w(“#box3”).show();
}
export function column2_mouseOut(event, $w) {
$w(“#column2”).background.src = “https://static.wixstatic.com/media/139b4f_0f3fb7fba22a494b8af401cdba706750~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_0f3fb7fba22a494b8af401cdba706750~mv2.png”;
$w(“#box4”).show(“flip”, flipOptions);
$w(“#box3”).hide();
}
export function column3_mouseIn(event, $w) {
$w(“#column3”).background.src = “https://static.wixstatic.com/media/139b4f_11ed4d9ee4364c09b63606c54132fad7~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_11ed4d9ee4364c09b63606c54132fad7~mv2.png”;
$w(“#box6”).hide();
$w(“#box5”).show();
}
export function column3_mouseOut(event, $w) {
$w(“#column3”).background.src = “https://static.wixstatic.com/media/139b4f_b6ea78eb09704f4c8eacabd07176ad1c~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_b6ea78eb09704f4c8eacabd07176ad1c~mv2.png”;
$w(“#box6”).show(“flip”, flipOptions);
$w(“#box5”).hide();
}
@citisonship You wouldn’t happen to have a tutorial on this for someone who is a beginner?
Hi, would you be able to share the code you added to get the 3 responsive house hover boxes to work please?
Hi I would also like to know what you did to make the boxes responsive
@marijose_88 I gave up with this and used Avada through WordPress - works very well
Hi,
Any chance you could guide me through the background element of this? Mine isn’t changing
