Jump to content

How to have hover text over List Image

Recommended Posts

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

Edited by Will123
Link to comment
  • Replies 9
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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!

Edited by pictureit
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 9 months later...

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;
}

 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.