Change Image Shape on Hover - Squarespace Layout Engine & Fluid Engine Tutorial

Поделиться
HTML-код
  • Опубликовано: 2 дек 2024

Комментарии • 4

  • @BrookeWyatt-n6c
    @BrookeWyatt-n6c Год назад +1

    Hi Guys! If I was jsut wanting to animate the curve of one specific corner of an image - what would be the best code suggestion for this?

    • @squareskills
      @squareskills  Год назад

      just change the "border-radius" property. It goes clockwise from top-left cornder so if you just wanted the bottom right corner you could use:
      border-radius: 0 0 2rem 0;
      For example.

  • @dubidubidapdap761
    @dubidubidapdap761 Год назад +1

    Hello guys. Wondering what specific code to replace with if I want the second image to show on hover instead of changing shape

    • @squareskills
      @squareskills  Год назад +1

      Hey Buddy,
      I'm afraid you'd need a very different code for that as they're very different interactions.
      We might make a tutorial on that at some point in the future, however, it's a fair bit more complicated.
      This border-radius transition is quite simple because it's changing a single property consistently, however, swapping images would depend on the block/layout type and other factors.