Jump to content

Exclude transition function from .detailImageContainerCard


cochize1
Go to solution Solved by Happy2Play,

Recommended Posts

cochize1

I have a nice looking sunction of enlarging posters on hover:

/* ----- Poster enlarge on hover ----*/
div.cardBox{transition:all 0.2s;}
div.cardBox:hover {transform:scale(1.045);transition:all 0.2s;}

but how can I exclude that function from the main poster in .detailImageContainerCard, I tried this but doesn;t seem to work:

/* ----- Poster enlarge on hover ----*/
div.cardBox:not(.detailImageContainerCard)
{transition:all 0.2s;}
div.cardBox:hover:not(.detailImageContainerCard)
{transform:scale(1.045);transition:all 0.2s;}

 

Link to comment
Share on other sites

Happy2Play

Use something like this

div.card:hover:not(.detailImageContainerCard)

or

div.card:not(.detailImageContainerCard):hover

 

Link to comment
Share on other sites

cochize1

ok, thanks this did the trick:

/* ----- Poster enlarge on hover ----*/
div.card:not(.detailImageContainerCard):hover {transform:scale(1.025);transition:all 0.2s;}

but now can't get rid of the dim effect in the same place and this won't do it, any ideas?

/* dim posters */
div.cardBox:not(.detailImageContainerCard){opacity: .75;}
div.cardBox:hover{opacity: 1;}

 

Link to comment
Share on other sites

  • Solution
Happy2Play
48 minutes ago, cochize1 said:

ok, thanks this did the trick:


/* ----- Poster enlarge on hover ----*/
div.card:not(.detailImageContainerCard):hover {transform:scale(1.025);transition:all 0.2s;}

but now can't get rid of the dim effect in the same place and this won't do it, any ideas?


/* dim posters */
div.cardBox:not(.detailImageContainerCard){opacity: .75;}
div.cardBox:hover{opacity: 1;}

 

Doesn't changing .cardBox to .card accomplish what you want?

  • Like 1
Link to comment
Share on other sites

cochize1

well, seems I haven't tried all the options and you were right, like usual, this works for me:

/* dim posters */
div.card:not(.detailImageContainerCard){
opacity: .75;}
div.card:hover{
opacity: 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...