Jump to content

HTML/CSS overlay does not work in Squarespace

Recommended Posts

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 &ldquo;Movie film festival of Salerno&quot; 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>

 

 

passione.png

passione.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

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.

Screenshot 2020-08-14 at 16.35.24.png

Screenshot 2020-08-14 at 16.35.48.png

Screenshot 2020-08-14 at 16.36.41.png

Screenshot 2020-08-14 at 16.36.54.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.