willhammond

Hi Macchi, As I understand it, you're trying to specify the font size based on the viewport width - which is a pretty cool idea, but it might be easier to control the font size using media queries instead, using relative length units such as "em" or "vw", and removing the movie description from the poster for mobile view. I also think the class names you've created in your HTML file are too generic and might be affecting styles in your Squarespace site which is where some problems may be arising. I've attached an example I made in Squarespace using an image block with the poster

Hi Deaton, Your site is currently password protected. I posted this code to a similar question - it was built for poster image blocks. /*rollover image effect*/ .image-block figcaption{ opacity: 0; } /*on hover*/ .image-block:hover figcaption{ opacity: 1; } .image-block:hover img{ filter:brightness(40%); } /*transition*/ .image-block figcaption, .image-block:hover img, .image-block img, .image-block:hover figcaption{ transition: .5s; } Let me know if this is close to what you were after, I can tweak the code if not.

Hi Jennegel, Here's some code that I've written before for rollover effects - the link should still works with this code. /*rollover image effect*/ .image-block figcaption{ opacity: 0; } /*on hover*/ .image-block:hover figcaption{ opacity: 1; } .image-block:hover img{ filter:brightness(40%); } /*transition*/ .image-block figcaption, .image-block:hover img, .image-block img, .image-block:hover figcaption{ transition: .5s; }

Hi Roshni, can I ask if it's pure CSS you're after or whether your hosting plan allows for JavaScript?