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
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
I'm sorry for the self-promotion- anyone with an idea on this one?
-bort
Campaign of the Year - 2018
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!
XCom: Defiance - Campaign of the Month November 2016
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
Campaign of the Year - 2018
Try changing your transform origin from right to 50% 30% 0;
They are among us!
XCom: Defiance - Campaign of the Month November 2016
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
Campaign of the Year - 2018
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
Campaign of the Year - 2018
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!
XCom: Defiance - Campaign of the Month November 2016
My hero!
-bort
Campaign of the Year - 2018
OK, that is so freaking cool. Whats the CSS code if I might ask?
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!
There are some settings for the portraits displayed in the list (first thing), then the overlay that is there with cgregory's help:
Finally, the hover:
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
Campaign of the Year - 2018
Yes I agree, the portrait effect is really cool!
Johnprime
Where the west is really wild!
The Valley of Life