macchi92 Posted August 9, 2020 Share Posted August 9, 2020 Hey all, I am trying to create a specific effect for my website. I have an image and on Hover I would like to display a black overlay on slight transparency+some text formatted in a specific way. I tried to do it with the Squarespace default way but I couldn't manage so I tried to use the HTML+CSS customization but still I am struggling. Something with the way I am specificing the text size based on the vw is breaking things. Any help? Adding video and image This is the CSS .container { position: relative; width: 50%; } body { font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .5s ease; padding: 2vw; background-color: rgba(0,0,0,0.7); } .container:hover .overlay { opacity: 1; } .Title { color: white; font-size: 5vw; position: relative; text-align: left; } .SubTitle { color: white; font-size: 3vw; position: relative; text-align: left; } .Synopsis { color: white; font-size: 2vw; position: relative; margin-top:30%; text-align: left; } .credits { color: white; font-size: 1.8vw; position: absolute; bottom: 0.5vw; text-align: left; line-height:70% } .overlay {color: white;} This is the HTML file <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Passione</title> <link href="../css_sheet.css" rel="stylesheet"> </head> <body> <div class="container"> <img src="passione.png" alt="Avatar" class="image"> <div class="overlay"> <div class="Title"> Passione </div> <div class="SubTitle">a John Turturro Film</div> <div class="Synopsis"> <p><p><strong>Synopsis</strong><br></p> <p>Filmed in Naples, Italy, Passione is the fourth film directed by John Turturro and released in the United States in June 2011. The movie chronicles the rich world of contemporary Neopolitan music tracing the influences of European, African and Arabic cultures in a wild, colorful and sexy musical adventure. Passione was present at the 67th Venice International Film Festival, won the Capri Cult Movie Award, the “Movie film festival of Salerno" and the City of Loano prize.;</p> <p><br></p> </div> <div class="credits"> <p><strong>Director:</strong> John Turturro</p> <p><strong>Role:</strong> Production Coordinato</p> <p><strong>Release:</strong> June 22nd 2011</p> </div> </div> </div> </body> </html> Screen Recording 2020-08-08 at 14.18.52.mov Link to comment
willhammond Posted August 14, 2020 Share Posted August 14, 2020 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 design, here is the code: .image-block-poster-text-alignment-center .sqs-block-image .design-layout-poster .image-card>*{ text-align: left !important; } .image-block figcaption{ opacity: 0; } .image-block .image-title-wrapper{ margin-bottom: 20% !important; } .image-block figcaption p:nth-of-type(3){ margin-top: 20% !important; } .image-block:hover figcaption{ opacity: 1; } .image-block:hover img{ filter:brightness(40%); } .image-block figcaption, .image-block:hover img, .image-block img, .image-block:hover figcaption{ transition: .5s; } /*media query for mobile*/ @media only screen and (max-width: 600px){ .image-block figcaption{ opacity: 1 !important; } .image-subtitle-wrapper{ display: none; } .image-block img{ filter:brightness(40%); } } Here is an example of a media query that you could use to adjust the font based on screen size: @media only screen and (max-width: 1100px){ /*margin styles*/ .image-block .image-title-wrapper{ margin-bottom: 0 !important; } .image-block figcaption p:nth-of-type(3){ margin-top: 0 !important; } /*text size*/ .image-block figcaption h1{ font-size: 25px; } .image-block figcaption p{ font-size: 14px; } } I hope this helps. Link to comment
rwp Posted August 16, 2020 Share Posted August 16, 2020 codepen https://codepen.io/r-w-p/pen/wvGGXzP Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment