"Changing or replacing" a Div or Text on hover on another element

Design help General
#1

Hey,

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!

#2

Hi and welcome

Start by working with Flex or Grid instead of columns.

Use one copy on the image, no needs for two, then use rotate inter action on hover.

Hope it helps

#3

Thanks Moshe!

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.

#4

Hi Samuel

Columns are old way to present bulk of divs Horizontally or vertically. Grid and 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 :slight_smile: Give Me A couple of days - I’ll record a short “HowTo” video.

1 Like
#5

Hi Moshe,

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

#6

Hi Samuel

Came back to your issue and found things were change - hope You’re on the right way :slight_smile: - don’t hesitate to reach out

#7

Hi Moshe,

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.

#8

Hi

Sorry for the delay - I’ll be back soon