Trying to achieve the same effect as the “Meet Our Products on Krave Beauty site”
Here is a gif preview
I tried setting an absolute position on new divs and placing them on top of the original and linking them to a click interaction of the product, but they end up being off position. I’m new to web-development so any help would be greatly appreciated! I haven’t been able to find any detailed tutorials on this effect.
Im guessing the text replace would work instead of the whole div, since the backgrounds are the same, but im not sure how to set that text switch when hovering the product nor how to get non-hover state to always visible.
Here is my site Read-Only
Link to my site
Thanks in advance!
Hi and welcome
Start by working with
Grid instead of columns.
Use one copy on the image, no needs for two, then use
rotate inter action on
Hope it helps
Could you explain the process a little more in detail, please?
What exactly needs to be flex or grid layout?
I’m not using any images at all, so I’m not sure what you meant there?
Thanks in advance.
Columns are old way to present bulk of divs Horizontally or vertically.
FlexBox Are the new (modern) tool to achieve this purpose and lay out the elements on your canvas.
Reading about those issues will help you to take your project forward in the right direction Give Me A couple of days - I’ll record a short “HowTo” video.
The layout of every parent div is indeed Flexbox.
Thanks a lot, looking forward to seeing a video on how to finally do this.
If it helps, Id also be fine with the method of just replacing text in one div element
Came back to your issue and found things were change - hope You’re on the right way - don’t hesitate to reach out
Yes, I think I figured out how to achieve this effect, however, I’m now having issues with optimizing for mobile and some flickering when the mouse moves between the divs too fast. Would still love to see a “How to video” on this.
Sorry for the delay - I’ll be back soon