av12

Greetings - I managed to put together some very rudimentary CSS code that display the text on an image block on hover over. But then I got stuck. Here is the code: /* Code for hover over v2 */ /* Remove square overlay from transparent images*/ #collection-620709cc26e4e10a4e555964 { .sqs-block-image .image-block-outer-wrapper.image-block-v2 .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay { position: relative !important;} } #collection-620709cc26e4e10a4e555964 { /*Hide Title and Subtitle on load*/ .design-layout-poster .image-card-wrapper { visibility: hidden; opacity:0; transition-duration: 0.5s; } /* Generate the hover effect on hover */ .design-layout-poster:hover .image-card-wrapper { visibility: visible; opacity:1; background-color: hsla(321, 55%, 42%, 0.31); } /* Font format title */ .design-layout-poster .image-title p { color: white !important; text-transform: none !important; } /* Font format subtitle */ .design-layout-poster .image-subtitle p { color: white !important; text-align: left !important; text-transform: none !important; font-family: Arial, Helvetica, sans-serif; font-size: 1.4em !important; } /* Hide on mobile */ @media screen and (max-width:640px) { .design-layout-poster .image-subtitle p { display: none;} .design-layout-poster .image-subtitle p { display: none;} } } The issue that I have is that on mobile sometimes the square overlay stays on if I go "back" on the page; so the page loads correctly on mobile and displays all the images without any test or overlay background. But if I tap on the image / link and then swipe back the purple overlay it present over the image. It doesn't happen all the time. The goal is to have a simple hover over effect on a block image poster but then just display the image alone on mobile, with the option to tap on it / link. Any help / suggestion are really appreciated. AV

I added the above code to the Header Page Code Injection but it affected the entire site; I'll try using the customs ccs and see if that works.

Well I added to the page header using Page Header Code Injection but it applied the title and subtitle everywhere on the site where poster was used. I'll the try the design - custom css

Awesome and very useful. Thank you!!!!

And will this apply to only this page or to entire site that uses .image-subtitle-wrapper selector?

Caroline thank you - indeed the new code works well when using links. Can I ask for your help with customizing the poster / image title and subtitle? For example I would like to be able to specify a different color for the title, and then a different color and font for the subtitle. I was able to control overall caption using figcaptio p but I believe that applies to entire text for the image.

I appreciate the help! That worked very well. Thank you!

That was it! Since hover is not a mobile thing do you happen to know how can I hide the text on mobile. Is it this section that controls it?

here is the site - https://www.rotrade.com/practice

I can - please allow me 1 minute to set that up.

It just happened that I didn't paste the last } but it was included in the code. So even with the above still didn't work. I forgot to mention that the template we use is 7.0 I am wondering if it isn't this section though that controls the figcaption display on hover?

That also didn't work ..... @media(max-width: 768px) { .sqs-block-content figcaption { position: relative !important; align-items: left !important; justify-content: left !important; margin-top: 10px; } .sqs-block-content figcaption h3 { color: #454141 !important; } .sqs-block-content figcaption h2 { color: #454141 !important; } .sqs-block-content figcaption h1 { color: #454141 !important; } .sqs-block-content figcaption h4 { color: #454141 !important; } .sqs-block-content figcaption p { color: #454141 !important; } I'll keep trying - already took too much of your time.

Here is what I used in order to change the color of text but it still the same: @media(max-width: 768px) { .sqs-block-content figcaption { position: relative !important; align-items: left !important; justify-content: left !important; margin-top: 10px; } .sqs-block-content figcaption h3 { color: #454141 !important; }, .sqs-block-content figcaption h2 { color: #454141 !important; }, .sqs-block-content figcaption h1 { color: #454141 !important; }, .sqs-block-content figcaption h4 { color: #454141 !important; }, .sqs-block-content figcaption p { color: #454141 !important; } Can it be that is not one of the tags i.e. H1, H2?

I really appreciate it! That worked out excellent. One more things please - I would like to change the background color on hover over (too dark) is it the line that controls that? What about if I want to change the color of the font? Is that the section? Thank you again!

Here is how it looks right now Basically it should show the image with no square / background applied: So basically I would like to maintain the image as it is i.e. no background. Then when hover over it is ok to display darker square with text over.

Thank you s much for the help! My images are transparent and round in shape; when using the poster feature it ads the square, gray overlay from the beginning. How can I remove that? I am ok with the square background overlay on hover but I would rather have none initially. Thank you!

Greetings. I was wondering if I can ask for some feedback. I need to create a product image and then when user is hovering over the image should add some text i.e. product description. I tried the image block but just the caption is not enough description. Imagine the image for example a square i.e. 2x2 and then hover over the image a gradient background will applied and text over. here is an example site and instruction but it using java script and static images; I was thinking to use css if possible. https://www.thequriouseffect.com/fun-tidbits-1 Thank you! AV