cursor activity overlay on image banner? ASAP HELP!

[Havana2024]

Hello,

I would like to set an overlay with cursor activity on a banner that has links to images on all pages.

The assumption is that it looks like the TOP page.

I’m in a hurry!
Please help me.

For example, here is where you want to set the overlay.
↓

want to reflect page：https://havanagroup-official.com/pages/unisex-salon-list

want to reflect PAGE:https://havanagroup-official.com/pages/online-store

reference TOP PAGE(overlay) :https://havanagroup-official.com/

[EBOOST]

Hi @Havana2024 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/theme.css
3. Add code below to end of file

#unisex-salon-list .highlights__item__background {
	padding: 0;
}

#unisex-salon-list  .highlights__item .image-wrapper {
	position: relative;
}
#unisex-salon-list  .highlights__item .image-wrapper img {
	position: static;
}
#online-store  .lazy-image{
	position: relative;
	cursor: pointer;
}

#unisex-salon-list .lazy-image:after,
#online-store  .lazy-image::after {
	transition: all .5s;
}

#unisex-salon-list .lazy-image:hover::after,
#online-store  .lazy-image:hover::after {
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #00000087;
  display: block;
  width: 100%;
  position: absolute;
}

#unisex-salon-list .highlights__container {
	overflow: visible;
}

[Havana2024]

Thank you very much!

Almost solved!

However, is it possible to fix the following?

① https://havanagroup-official.com/pages/online-store

I would like to add cursor activity to the image banner as well.
This is the page creation table that contains the image link.
Is it possible?

②
The overlay is also applied to the header icon of the page where the cursor activity is added, so I would like to remove the header.

Thank you for your support!

[EBOOST]

Hi,

May I suggest replace old code with code below:

#unisex-salon-list .main-content .highlights__item__background {
	padding: 0;
}

#unisex-salon-list .main-content  .highlights__item .image-wrapper {
	position: relative;
}
#unisex-salon-list .main-content  .highlights__item .image-wrapper img {
	position: static;
}

#online-store  .main-content a:has(> img) {
  display: inline-block;
}
#online-store  .main-content a:has(> img),
#online-store  .main-content p:has(> img),
#online-store  .main-content td:has(> img),
#online-store .main-content   .lazy-image{
	position: relative;
	cursor: pointer;
  font-size: 0;
}

#online-store  .main-content a:has(> img):after,
#online-store  .main-content p:has(> img):after,
#online-store  .main-content td:has(> img):after,
#unisex-salon-list .main-content  .lazy-image:after,
#online-store  .lazy-image::after {
	transition: all .5s;
}

#online-store  .main-content a:has(> img):hover:after,
#online-store  .main-content p:has(> img):hover:after,
#online-store  .main-content td:has(> img):hover:after,
#unisex-salon-list .main-content  .lazy-image:hover::after,
#online-store  .main-content  .lazy-image:hover::after {
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #00000087;
  display: block;
  width: 100%;
  position: absolute;
}

#unisex-salon-list .main-content  .highlights__container {
	overflow: visible;
}

[Havana2024]

Hi,

Thankyou for your support!

The new code you gave me has changed!

①② Both are closer to my wishes!

But other unlinked images also had overlays.

I only want images with links.

Could you please confirm?

[EBOOST]

Hi,

If you only want show overlay on images that have an hyperlink. I suggest code below:

#unisex-salon-list .main-content .highlights__item__background {
  padding: 0;
}

#unisex-salon-list .main-content  .highlights__item .image-wrapper {
  position: relative;
}
#unisex-salon-list .main-content  .highlights__item .image-wrapper img {
  position: static;
}

#online-store  .main-content a:has(> img) {
  display: inline-block;
}
#online-store  .main-content a:has(> img),
#online-store .main-content   .lazy-image{
  position: relative;
  cursor: pointer;
  font-size: 0;
}

#online-store  .main-content a:has(> img):after,
#unisex-salon-list .main-content  .lazy-image:after,
#online-store  .lazy-image::after {
  transition: all .5s;
}

#online-store  .main-content a:has(> img):hover:after,
#unisex-salon-list .main-content  .lazy-image:hover::after,
#online-store  .main-content  .lazy-image:hover::after {
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #00000087;
  display: block;
  width: 100%;
  position: absolute;
}

#unisex-salon-list .main-content  .highlights__container {
  overflow: visible;
}

[Havana2024]

thank you!

Fixed.

Also, the cursor activity is displayed in another section of the page, and since there is no link, I would like to hide the cursor activity.

This is the STAFF image part of the page below.

Could you please confirm?

https://havanagroup-official.com/pages/about

[EBOOST]

Hi,

I suggest add more code below:

#about .column__image figure:hover:after {
	display: none;
}

[Havana2024]

Thankyou very much!!