Photo Gallery Customize Arrows, Title, and Description

Hiya @Max and @Helga!

I am updating our site and was hoping to be able to get some help with some detailed CSS requests? I am currently working on one called “Untitled Photo Gallery” and am trying to make it ultimately look like this…

The description on top working as a numbering system, and the title underneath. Ideally the arrow would look like the one in my example. Do you think you can help me with this?

Hi there, @Quilla :waving_hand:

Unfortunately, it’s impossible to display numbers above the photo and the caption below. Regarding the custom arrow, this CSS code will do the trick:


.es-carousel-arrow-control-icon svg {
  display: none;
}

.es-carousel-arrow-control-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://icon-icons.com/download-file?file=https%3A%2F%2Fimages.icon-icons.com%2F1416%2FPNG%2F512%2Farrows-slim-right_98235.png&id=98235&pack_or_individual=pack') no-repeat center;
  background-size: contain;
  pointer-events: none;
}

.es-carousel-arrow-control-right {
  background-color: transparent;
}

Please replace the arrow icon URL with the icon URL you’d like to use and let me know if it helped:

Thank you so much @Max !!! It looks like it is working within Elfsight but when I go to my squarespace site, it’s not updating :frowning:

Also I am so sorry to trouble you @Max! but are there any hover effects one could add when clicking on a particular item in the gallery? for instance a subtle zoom?

Hi there, @Quilla :waving_hand:

I am glad to say that you can add Photo Effect on Hover in the Photo section on the Style tab of your widget’s settings:


Regarding the CSS code, could you please send me a link to the page, where your widget is installed? This would help us understand what causes the issue :slightly_smiling_face: