How to have hover text over List Image

In this page of my site: https://www.unswaseanconference.com/about-asean-2021

I want to make the caption of each image in my list carousel to only appear on the centre of the image and also only appear when the image is hovered. Any help on this will be greatly appreciated.

My idea is for it to be like the one discussed on this post: 

However, that post only works for summary. When I tried applying it to my code, it didn't work

Hi,

Can you add some caption & enable caption? We can check easier

14 hours ago, tuanphan said:

Hi,

Can you add some caption & enable caption? We can check easier

hi @tuanphan, the caption is already there. Its under the flags

On 8/27/2021 at 3:23 PM, Will123 said:

hi @tuanphan, the caption is already there. Its under the flags

Add to Design > custom CSS

/* about asean 2021 */
body#collection-610b8e65b7858e2ce0c1354c {
li.user-items-list-carousel__slide.list-item {
    position: relative;
}
.list-item-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.3s;
}

li.user-items-list-carousel__slide.list-item:hover .list-item-content {
    opacity: 1;
    pointer-events: auto !important;
}

li.user-items-list-carousel__slide.list-item {
    pointer-events: auto !important;
}}

On 8/30/2021 at 4:50 AM, tuanphan said:

Add to Design > custom CSS

/* about asean 2021 */
body#collection-610b8e65b7858e2ce0c1354c {
li.user-items-list-carousel__slide.list-item {
    position: relative;
}
.list-item-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.3s;
}

li.user-items-list-carousel__slide.list-item:hover .list-item-content {
    opacity: 1;
    pointer-events: auto !important;
}

li.user-items-list-carousel__slide.list-item {
    pointer-events: auto !important;
}}

 

Hi, im also trying to do this and the above CSS works great, except that I'd like the thumbnails to darken as well on hover and make the text white so it's easier to read. I can figure out making the text white but I'd love some help on darkening the images. Thanks!

On 9/28/2021 at 5:13 AM, pictureit said:

Hi, im also trying to do this and the above CSS works great, except that I'd like the thumbnails to darken as well on hover and make the text white so it's easier to read. I can figure out making the text white but I'd love some help on darkening the images. Thanks!

Can you share link to your site? We can check easier

I have a carousel list item with picture and button for each item.

I added custom css to create a drop shadow and border on hover. However my hover effect only takes place when i scroll over the button.

Is there a way to force the hover state to occur when the mouse appears anywhere on each individual carousel list item?

Here's my code:

  .user-items-list-carousel .list-item[data-is-card-enabled="true"]:hover {
  box-shadow: 5px 5px 10px #000 !important;
  border:10px solid black;
}

On 7/9/2022 at 10:00 PM, willzj said:

I have a carousel list item with picture and button for each item.

I added custom css to create a drop shadow and border on hover. However my hover effect only takes place when i scroll over the button.

Is there a way to force the hover state to occur when the mouse appears anywhere on each individual carousel list item?

 

Here's my code:

  .user-items-list-carousel .list-item[data-is-card-enabled="true"]:hover {
  box-shadow: 5px 5px 10px #000 !important;
  border:10px solid black;
}

 

Can you share link to page where you use list? We can test code easier

The website is not public yet. But the page is literally just a basic carousel with each list item having a picture, text body, and button.  When I hover mouse over any part of the item the mouse pointer turns into a hand. However the hover action is only being triggered when I hover over the button which then will add the drop shadow that I coded.

6 hours ago, willzj said:

The website is not public yet. But the page is literally just a basic carousel with each list item having a picture, text body, and button.  When I hover mouse over any part of the item the mouse pointer turns into a hand. However the hover action is only being triggered when I hover over the button which then will add the drop shadow that I coded.

See this