Any HTML / CSS expert could help me? ⌨

Hi!
I found a great html/css code effect: codepen.io
and I want to add it to my website (just 2 words, not the menu)

I’ve edited the html and css like this:

HTML:
<p data-item='Diseño Gráfico'>Diseño Gráfico</p>


CSS:

p {
  margin: 16px;
  font-size: 96px;
  color: #ccc;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 1s ease-in-out;
  position: relative;

  &::before {
    content: attr(data-item);
    transition: all 1s ease-in-out;
    color: #8254ff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0;
    overflow: hidden;
  }

  &:hover {
    &::before {
      width: 100%;
    }
  }

And in codepen it works well, but I’ve tried to add it to Sparkle with embedded html option, and doesn’t works well.

I think it’s matter of some missing CSS instruction, but I don’t know :sweat_smile:

Any expert who can help me?
Thanks a lot!

@tanyyys, Sparkle has its own CSS based on how you create your elements. With your code above, you are wanting to override the CSS that Sparkle generates based on your canvas design… a very difficult ask. I think it is best designing what you can on the canvas, but I’m sure when @duncan swings around he’ll help you some more with your question…

So to help you out this is what you need to place in the Embedded Content container. You most likely did not include the <style>... </style> around your CSS.

<p data-item='Diseño Gráfico'>Diseño Gráfico</p>

<style>
p {
  margin: 16px;
  font-size: 96px;
  color: #ccc;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 1s ease-in-out;
  position: relative;

  &::before {
    content: attr(data-item);
    transition: all 1s ease-in-out;
    color: #8254ff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0;
    overflow: hidden;
  }

  &:hover {
    &::before {
      width: 100%;
    }
  }
</style>

But like I mentioned this will start mucking the rest of you p tagged content up…

1 Like