Jump to content

How to dim posters on hover?


cochize1

Recommended Posts

cochize1

@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;}

prtscr.thumb.png.83ea6ced5d2bb343611eea4671dca21d.png

Edited by cochize1
Link to comment
Share on other sites

Happy2Play

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

cochize1
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

Happy2Play
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

cochize1

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 by cochize1
Link to comment
Share on other sites

arrbee99

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

cochize1

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;}

 

  • Like 1
  • Agree 1
Link to comment
Share on other sites

cochize1

@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 by cochize1
Link to comment
Share on other sites

Happy2Play
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

cochize1
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

Happy2Play
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;}

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...