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

RowabiCo
Excursionist
27 1 11

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!

 

Replies 7 (7)

KetanKumar
Shopify Partner
36905 3641 11986

@RowabiCo 

yes, please code  so i will check and update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

LitCommerce
Astronaut
2860 684 744

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:

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

RowabiCo
Excursionist
27 1 11

@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 */
}  
KetanKumar
Shopify Partner
36905 3641 11986

@RowabiCo 

thanks but i can't see any thing now 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RowabiCo
Excursionist
27 1 11

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!

KetanKumar
Shopify Partner
36905 3641 11986

@RowabiCo 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RowabiCo
Excursionist
27 1 11

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 🙂 Do you have any ideas on how we can achieve this?