Hi, so i have a page that allows you to select different collections of items for sale on the site. Each category is represented by a strip element covering the length of the site and, upon clicking, redirects you to the product page with the desired collection for sale.
I want to make it more interactive by having it so that whenever your mouse isn’t over the strip, the background image is blurred whilst still keeping crisp, sharp text (text is displayed as text element within the strip.) Then, when you mouse over it, the background image becomes sharper and in focus. So far i have a hacky solution where i have two strips overlapping each other, both with identical text but one with an in focus image as the background and then the one behind that having the out of focus background. I have it so that if you mouse over the strip, the in focus one fades in using “show”, then once it is moused out, it is hidden using “hide”. Both “show” and “hide” use the “fade” transition.
However, when the website is loaded, the in-focus strips are displaying (i would like it to load with them all out of focus). When you mouse over it, nothing changes, then when you remove your mouse it hides the in focus strip, giving the effect of the out of focus strip .But when you mouse back over it again, rather than the in focus strip revealing itself as expected, it just doesn’t do anything and the out of focus strip remains in display. This isn’t any good, especially given that the “onClick” event that redirects you to the desired collection page is linked to the in focus strip.
Above is the site, there’s five different strips i want to this with. They’re all formatted the same, just with different photos. The console is displaying the code that i have linked to columnStrip5 (the “shop all products” strip that is selected on the screenshot).
I’d appreciate any and all help with a solution as to how i could achieve this as i am a complete novice with corvid.