How to make picture and title hover at the same time, linked to collection?

Store Design
1

Howdy everyone,

I’m trying to build the collection list (Pendant Lights, Bedside Lighting, Decor) on the front page of website to have images and title (underline effect) hover at the same time. Currently, I have to move my mouse over to the title to have the title underlined, and also I can only access the collection list by clicking directly on the title, instead of clicking on a collection image.

I would really appreciate it if anyone could help us with the solution for this issue, we have spent quite some time on it already without progress.

Our website is https://www.rowabi.com/ or https://wabi-element.myshopify.com/

The ideal end result would look something like this website when you move your mouse into the jewelry collection on the front page: https://www.cuoispirit.com/

Thanks a lot everyone and have a great day!

1 Like
2

@RowabiCo

yes, please code so i will check and update

3

Hi @RowabiCo ,

Go to Assets > theme.min.css and paste t

.homepage-collection-grid-item .grid-item__title {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

Hope it helps!

his at the bottom of the file:

4

@LitCommerce @KetanKumar

Hi so I have this code so far. The hover now seems to work with BOTH title and the image at the same time. However, since we adjust the title to 100% dimension of the box, the underline will have an effect at the bottom left of the box…

Could you guys please help me from here? This is so close

.homepage-collection-grid-inner:hover .grid-item__title {
  display: inline-block;
  position: relative;
  color: #F2F0EB;
}

.homepage-collection-grid-inner:hover .grid-item__title:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
  position: relative
  justify-content: center;
  align-items: center;
}

.homepage-collection-grid-item:hover .grid-item__title {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.homepage-collection-grid-inner:hover .grid-item__title:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #F2F0EB;
  transform-origin: bottom left;
  transition: transform 0.5s ease-out;
}

.homepage-collection-grid-inner:hover .grid-image  {
    transform: scale(1.03) !important;
  	transition: transform 0.5s;
}

.homepage-collection-grid-inner {
    overflow: hidden;      /* hide the overflow */
}
5

@RowabiCo

thanks but i can’t see any thing now

1 Like
6

Hi @KetanKumar

With the codes above, I could get to this point: https://www.rowabi.com/ as you can see when we hover over the Bedside Lighting, the image will zoom in, and the title will be underlined (separately).

One more point I’m trying to get to is when I hover over the image of Pendant Lights, the underline effect will go under the “Pendant Lights” title without us hovering over the titles; meaning the zoom in and the underlined hover effects are happened altogether. Hope it makes sense! Thanks in advance!

1 Like
7

@RowabiCo

yes i have check now on over image zoom and linked right

1 Like
8

Yes, that’s right! So close. Now I just need to link the Image Zoom and the Underlined together. So that when we hover over Zoomed Image, it will also underline the Title :slightly_smiling_face: Do you have any ideas on how we can achieve this?