Hi,
I am trying to create an image that flips upon hover that has the image on one side and then text in the other. I found the code to do this, however the image has to be selected as a "Poster" which from everything I'm reading should be under the design tab of the image itself, however these are the only options available:
Tutorial: https://insidethesquare.co/squarespace-tutorials/rotating-image-card
Code to actually flip image:
/*Card Flip Effect*/
#block-id{
/* Default Setup */
&.image-block .sqs-block-content{
perspective: 2000px;
}
.design-layout-poster {
position: relative;
transition: transform 0.8s;
transform-style: preserve-3d;
}
//Image
.design-layout-poster .intrinsic{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
//Caption
.design-layout-poster figcaption{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateY(180deg);
background: hsla(0,0%,15%,1);
//Add if needed
//border-radius: 20px;
}
/*Hover Effect*/
&.image-block:hover .design-layout-poster {
transform: rotateY(180deg);
}
}
Can anyone help me find how to make the image "Poster"?