Jump to content

Shape Mask on an img in a code block

Recommended Posts

I want to add a shape mask to an image within a code block. I added a clip-path style to my css and the masking works when I view the page in edit mode but doesn't work at all on the live site. Here's the code of the block.

@import url('https://fonts.googleapis.com/css2?family=Antic+Didone&display=swap');

.text-wrap-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 15px;
  overflow: hidden;

.text-wrap--text {
  text-align: justify;

.text-wrap--image img {
  width: 450px; /* Adjust the width of the image */
  height: auto;
  float: left;
  margin-right: 20px; /* Adjust the gap between text and image */
  clip-path: url(#svgPathNewtv);
  .text-wrap--text p::first-letter {
  font-size: 1.5em; /* Adjust the font size of the drop cap */
  float: left;
  margin-right: 2px; /* Adjust the space between the drop cap and the text */
  font-weight: bold; /* Optionally make the drop cap bold */
  font-family: 'Antic Didone', serif; /* Use Antic Didone font */


<div class="text-wrap-container">
  <div class="text-wrap--image">
    <img src="https://images.squarespace-cdn.com/content/65c68b06cf997117009a14c1/329c890e-955f-4363-98b3-848630d5b40b/SpaceG_02.png" alt="Space Image">


Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

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