FANDOM


  • ✔ [ANSWERED] I'm attempting to fix up a hover design (link of the draft) for the character section of the main page. But as you can see, the hover circle animates at the back of the character image. And how do you animate such that it starts at the center of the image? I don't know what's wrong with the code, the CSS or the HTML? I'm out of noob-ish ideas, help? (link to Common.css page; refer to the "Mainpage portal" section)

    ? [UPDATE] (copied from my reply below): I made it so that a circular image appears when hovered, but the image starts animating from the top-left and not from the center. Help? (link to draft template above)

      Loading editor
    • It's easier to use a second box, rather than the .portal, to create this animation.

      First, remove the .portal:hover CSS, i.e. remove

      .portal:hover {
          height: 100px;
          width: 100px;
      }

      Then, add the pseudo-element to portal link and make it show up on hover. Also, make the margin go from 50px to 0px to let it zoom in from the middle:

      .portal a:before {
        content:"";
        height:0px;
        width:0px;
        margin:50px;
        border-radius:50%;
        background:#0d0d57;
        z-index:1;
        display:block;
        position:absolute;
        transition:all 0.4s ease-in-out;
      }
      .portal a:hover:before {
        height:100px;
        width:100px;
        margin:0;
      }
        Loading editor
    • Thank you very much, I will try my best to understand the code. I have plans to add pop-up text, and I will update if I'm having problems with it as well.

        Loading editor
    • Yea - that may be a bit more difficult - though should also still be doable. Let us know how it goes!

        Loading editor
    • Okay, I scrapped the text idea, and just made it so that a circular image appears when hovered, but the image starts animating from the top-left and not from the center. Help? (link to the draft template)

        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.