Overlay .game-content-image

Bortas
Bortas

I'm atttempting to overlay a fancy border around each character portrait in the list. I was trying it using:


.character-list-item .game-content-image::before

But I wasn't successful in having my overlay show up. I ended up using:


.character-list-item::before

And messing with some positioning. At first,I thought I had it worked out, but then when I started applying my various "transforms" things get pretty wonky, as it is positioned based on the whole character info box, not just the character portrait.

Is it a selector issue, or something else entirely? 

I tried appending the selector with things like "img::before" and a variety of others, but I'm just stuck

TIA,

-bort

Morwindl - Rising Tide

Comments

  • Bortas
    Bortas
    Posts: 616

    I'm sorry for the self-promotion- anyone with an idea on this one?

    -bort

    Morwindl - Rising Tide

  • cgregory
    cgregory
    Posts: 713

    What effect and transforms are you trying for? Just the scale transform you currently have? It is easier to troubleshoot it if the border with its wonky effects are on your page (or maybe a test campaign)

     

     

    They are among us!

    image

    Current Campaign: XCom: Defiance - Campaign of the Month November 2016

                                           My Campaign CSS

                              Unlocking The Portal: A Guide to OP CSS                                    

     

     

  • Bortas
    Bortas
    Posts: 616

    Good call: https://morwindl-2.obsidianportal.com/characters

    I'm trying to transform-origin: right on the character portrait, so that when it enlarges (transform: scale();), it doesn't come over the character title, tags, etc.

    Because the overlay is tied to the whole character info section, the transform looks REALLY terrible with the overlay. Alternatively, if I take off the origin:right, the animation looks good, just the portrait covers info of the character (as seen here: https://bortas.obsidianportal.com/characters).

    Thanks,

    -bort

    Morwindl - Rising Tide

  • cgregory
    cgregory
    Posts: 713

    Try changing your transform origin from right to 50% 30% 0;

    transform-origin: 50% 30% 0;

    They are among us!

    image

    Current Campaign: XCom: Defiance - Campaign of the Month November 2016

                                           My Campaign CSS

                              Unlocking The Portal: A Guide to OP CSS                                    

     

     

  • Bortas
    Bortas
    Posts: 616

    Just when I get comfy with my CSS knowledge, you show me something new again, thank you!

    It doesn't attach it to the character image, but it doesn't really need that - I thought doing it that way would make the transforms easier.

    Anyway - thanks a ton!

    -bort

    Morwindl - Rising Tide

  • Bortas
    Bortas
    Posts: 616

    cgregory - could you take another look at this issue? I really wanted to expand the portrait size, but if I left it in place, it would cover the link to actually click on the character, so I'm trying to set as transform-origin: right... but since they aren't directly linked, that doesn't work. I've been guessing around with the number you posted above, trying to make that work, but... I'm guessing. Is there a method you are using to arrive at those numbers?

    Anyway, the issue now is that when it expands, they don't quite stay on top of each other. I can somewhat mask this by making the transform quick, right now I have it relatively slow, so the issue can easily be seen.

    Thanks,

    -bort

    Morwindl - Rising Tide

  • cgregory
    cgregory
    Posts: 713

    Once my luggage gets in with my computer, I’ll take a look. Only have an ipad right now. My luggage didn’t quite make the flight.

    They are among us!

    image

    Current Campaign: XCom: Defiance - Campaign of the Month November 2016

                                           My Campaign CSS

                              Unlocking The Portal: A Guide to OP CSS                                    

     

     

  • Bortas
    Bortas
    Posts: 616

    My hero!

    -bort

    Morwindl - Rising Tide

  • Keryth987
    Keryth987
    Posts: 750

    OK, that is so freaking cool. Whats the CSS code if I might ask?

  • Bortas
    Bortas
    Posts: 616

    There are a few aspects to it that are important to realize - first... I am replacing the image that would go in teh character portait with a higher resolution version, as when it enlarges it really looks terrible if the pics are low res. Now... to add more high res pics!


    .game-content-image[title="Test NPC"] {content: url('https://db4sgowjqfwig.cloudfront.net/images/4337306/Hendel.jpg');}

    There are some settings for the portraits displayed in the list (first thing), then the overlay that is there with cgregory's help:


    /* Settings of character images */
    .character-list-item .game-content-image { box-shadow:0 3px 5px 3px rgba(30,30,30,.7);
    border-radius:50%; filter: sepia(60%); position: absolute; display: inline-block; transition: all 1.25s ease-in-out; z-index: 1; transform: scale(.95);}

    /* Fancy portrait overlay that rotates on hover */
    .character-list-item::before{ background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/154555/assets/791892/Border-Characters.png); pointer-events: none;
    background-size: 100% 100%; background-repeat: no-repeat; background-position: left center; content: "";
    width: 98px; height: 98px; display: block; z-index: 2; position: absolute; transition: all 1.25s ease-in-out; transform: rotate(-10deg);}

    Finally, the hover:


    .large-block-grid-2 .character-list-item:hover .game-content-image {filter: sepia(0%);}

    .character-list-item:hover .game-content-image { transform-origin: right; transform: scale(3.5); filter: sepia(0%); overflow: visible!important; z-index: 3; position: absolute;box-shadow:0 5px 9px 5px rgba(30,30,30,.9);}

    .character-list-item:hover::before { transform-origin: 60% 12.5% 0; transform: rotate(60deg) scale(3.7); z-index: 4; }

    It's that very last one that isn't quite right, and why the dial overlay doesn't quite line up with the images during the scale increase.

    -----

    I'm chugging hard on this, so I can upload this CSS over my old campaign - this will be the 'season two' site.

    -bort

    Morwindl - Rising Tide

  • Johnprime
    Johnprime
    Posts: 221

    Yes I agree, the portrait effect is really cool!

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

Sign In or Register to comment.