FANDOM


  • Note: I decided to make a new post because I don't know if the previous post I made was marked as answered.

    I made a template draft where a circular image appears when hovered, but the image starts animating from the top-left and not from the center. Help?

    Links

      Loading editor
    • Is this a duplicate of Thread:1718784?

        Loading editor
    • Seems like it works for me.

        Loading editor
    • Fandyllic wrote: Is this a duplicate of Thread:1718784?

      Yeah, sorry, I didn't know whether to make a new post for a separate question.

        Loading editor
    • Andrewds1021 wrote: Seems like it works for me.

      Not yet. I want it to start from the center of the star image but instead, it starts animating from the blue part in the top-left.

        Loading editor
    • Still need help...?

        Loading editor
    • What you currently have is this:

      .portal-CourtneyWhitmore a::before {
        content: "";
        height: 0;
        width: 0;
        margin: 50px;
        border-radius: 50%;
        background: url("https://vignette.wikia.nocookie.net/dcstargirlseries/images/b/bb/Portal-Stargirlsymbol.png/revision/latest?cb=20190822121335");
        z-index: 1;
        display: block;
        position: absolute;
        transition: all 0.4s ease-in-out;
      }

      What you want to have is this:

      .portal-CourtneyWhitmore a::before {
        content: "";
        height: 0;
        width: 0;
        margin: 50px;
        border-radius: 50%;
        background: url("https://vignette.wikia.nocookie.net/dcstargirlseries/images/b/bb/Portal-Stargirlsymbol.png/revision/latest?cb=20190822121335") center center;
        z-index: 1;
        display: block;
        position: absolute;
        transition: all 0.4s ease-in-out;
      }
        Loading editor
    • Andrewds1021 wrote: What you currently have is this:

      .portal-CourtneyWhitmore a::before {
        content: "";
        height: 0;
        width: 0;
        margin: 50px;
        border-radius: 50%;
        background: url("https://vignette.wikia.nocookie.net/dcstargirlseries/images/b/bb/Portal-Stargirlsymbol.png/revision/latest?cb=20190822121335");
        z-index: 1;
        display: block;
        position: absolute;
        transition: all 0.4s ease-in-out;
      }

      What you want to have is this:

      .portal-CourtneyWhitmore a::before {
        content: "";
        height: 0;
        width: 0;
        margin: 50px;
        border-radius: 50%;
        background: url("https://vignette.wikia.nocookie.net/dcstargirlseries/images/b/bb/Portal-Stargirlsymbol.png/revision/latest?cb=20190822121335") center center;
        z-index: 1;
        display: block;
        position: absolute;
        transition: all 0.4s ease-in-out;
      }

      Thank you very much. Not to complain, but any explanation as to why it's vibrating?

        Loading editor
    • I am not sure, but I would guess it has something to do with how the element is positionsed.

        Loading editor
    • Andrewds1021 wrote: I am not sure, but I would guess it has something to do with how the element is positionsed.

      I figured as much. Well, speeding up the animation seems to make the vibration less noticeable, so it's all good. Thanks for the assist.

        Loading editor
    • Glad I could help. Let me know if there is anything else you need help with. Though I am pretty busy IRL at the moment so it might be some time before I get around to it.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.