cochize1 40 Posted October 20, 2021 Share Posted October 20, 2021 (edited) @Happy2Play I want to make a transition of a posters on hover from dimmed to regular. I have this piece of code that works but the dim is uneven on the whole poster as on the picture below (sometimes the bottom of the poster is highlighted, sometimes right or left hand side or other part, but rarely the whole poster within it's borders as intended). What is wrong? /* dim posters */ div.card:not(.detailImageContainerCard){ opacity: .65;} div.card:hover{ opacity: 1;} Edited October 21, 2021 by cochize1 Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted October 21, 2021 Share Posted October 21, 2021 I have looked at it and get random image artifacts similar to what you are trying to show. But have a feeling it has to do with the multiple layers. Link to comment Share on other sites More sharing options...
cochize1 40 Posted October 21, 2021 Author Share Posted October 21, 2021 1 minute ago, Happy2Play said: I have looked at it and get random image artifacts similar to what you are trying to show. But have a feeling it has to do with the multiple layers. Yeah, it seems so and I think it must have changed somewhere over the releases as I think it worked just fine some time ago (just noticed that recently). Do you think you could find any way around this? Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted October 21, 2021 Share Posted October 21, 2021 3 minutes ago, cochize1 said: Yeah, it seems so and I think it must have changed somewhere over the releases as I think it worked just fine some time ago (just noticed that recently). Do you think you could find any way around this? I can look but I know it takes more then just your code above as the cardoverlay itself blocks your code so I don't see how it worked before. Link to comment Share on other sites More sharing options...
cochize1 40 Posted October 21, 2021 Author Share Posted October 21, 2021 (edited) Well it can be any other code that would give the dim effect on the posters (with exception of '.detailImageContainerCard') so if you could take a look and maybe come with a solution with sny other bit of code I'd appreciate that. Edited October 21, 2021 by cochize1 Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted October 21, 2021 Share Posted October 21, 2021 There wouldn't be anything in that thing you looked at the other day for having borders around posters that you could modify somehow (the code on page 3) - Link to comment Share on other sites More sharing options...
cochize1 40 Posted October 21, 2021 Author Share Posted October 21, 2021 Sorry, but not sure that's the code I am looking for. And one thing I haven't noticed that might be significant is that I have removed overlay with thsi bit: /*----- Remove dark overlay on posters on hover ----*/ .cardOverlayContainer{background: none!important;} 1 1 Link to comment Share on other sites More sharing options...
cochize1 40 Posted October 23, 2021 Author Share Posted October 23, 2021 Sooo... @Happy2Play, any suggestions on this topic? Link to comment Share on other sites More sharing options...
cochize1 40 Posted October 29, 2021 Author Share Posted October 29, 2021 (edited) @Happy2Play have you found any workaround for that 'dim' issue by any chance? I have just noticed that this only concerns Chrome and not Firefox. @chef I have also noticed that you had some tweaks for that transformation some time ago. Maybe you know how to manage that? Edited October 29, 2021 by cochize1 Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted October 29, 2021 Share Posted October 29, 2021 1 hour ago, cochize1 said: @Happy2Play have you found any workaround for that 'dim' issue by any chance? I have just noticed that this only concerns Chrome and not Firefox. Interesting but true, so all I can think of is a defecting in the platform. As everything I tried pretty much gave the same results. /* dim posters */ div.card-hoverable:not(:hover):not(.detailMainContainer .card-hoverable):not(.details-additionalContent .card-hoverable){ opacity: .65;} div.cardOverlayContainer {background: none;} Link to comment Share on other sites More sharing options...
cochize1 40 Posted October 29, 2021 Author Share Posted October 29, 2021 2 minutes ago, Happy2Play said: /* dim posters */ div.card-hoverable:not(:hover):not(.detailMainContainer .card-hoverable):not(.details-additionalContent .card-hoverable){ opacity: .65;} div.cardOverlayContainer {background: none;} Not sure what that code changed as the result is the same as before. Ok, so Maybe you could give me some alternative working across all browsers? I had something like this but it does not work on all the posters: /* ----- Poster enlarge on hover ---- */ div.card:not(.detailImageContainerCard):hover {transform:scale(1.025); transition:all 0.2s;} Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted October 29, 2021 Share Posted October 29, 2021 8 minutes ago, cochize1 said: Not sure what that code changed as the result is the same as before. Ok, so Maybe you could give me some alternative working across all browsers? I had something like this but it does not work on all the posters: /* ----- Poster enlarge on hover ---- */ div.card:not(.detailImageContainerCard):hover {transform:scale(1.025); transition:all 0.2s;} Everything I tried shows artifacts in Edge/Chrome so I am guessing a Chromium bug as you noticed works fine in Firefox. Luke is already using transform on some card elements (virtualScrollItem) that is why it does not work on all div.card. So target cardBox instead of card since you can not override Luke's transform without the card row going crazy. /* ----- Poster enlarge on hover ---- */ div.cardBox:not(.detailImageContainerCard .cardBox):hover {transform:scale(1.025); transition:all 0.2s;} 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now