1

I've coded it in css where if you hover over a div it expands and show more details about the div, the issue is that whenever I remove the mouse some of the color is still left as lines, I'll attach a picture.

This is the css code where movie card is the details and movie is the div to hover on

.movie-card{ transition: 500ms ease-in-out; background-color: #a851ff; opacity: 0; visibility: hidden; border: 1px solid #a851ff; } .movie-box-content:hover .movie-card{ transition-delay: 250ms; transition-duration: 500ms; visibility: visible; opacity: 1; }

This is the result of hovering over:

Picture1

And this is after removing the mouse over it:

Picture2

its worth noting that after I scroll once, all the lines get removed.

Improve this question
2
  • 1
    Could you put up a minimal working snippet that shows the problem. Commented Jan 23, 2021 at 21:16
  • sure, I uploaded it to code pen: codepen.io/marwantukhta/pen/QWKRomj Commented Jan 23, 2021 at 22:11

2 Answers 2

Reset to default
0

Removing the transition: 500ms ease-in-out; from the movie-card class gets rid of the spurious 'shadows'.

 .movie-box { position: relative; display: block; width: 300px; height: 168.75px; } .movie-box-content { transform: scale(1); transition: 500ms ease-in-out; background-image: url('https://wallpaperaccess.com/full/1508305.jpg'); background-repeat: no-repeat; background-size: 300px 168.75px; width: 100%; height: 100%; rborder-radius: 2%; } .movie-box-content:hover { transition-delay: 250ms; transition-duration: 500ms; transform: scale(1.3); border: 1px solid #a851ff; box-shadow: #a851ff; } .movie-card { /* transition: 500ms ease-in-out;*/ background-color: #a851ff; opacity: 0; visibility: hidden; } .movie-box-content:hover .movie-card { transition-delay: 250ms; transition-duration: 500ms; visibility: visible; opacity: 1; }
<div class="movie-box"> <div class="movie-box-content"> <div style="width: 100%; height: 100%;"></div> <div class="movie-card hidden"> <div class="text-center"> <strong>Drama, psycho, crime</strong> </div> </div> </div> </div>

There is the question of whether this alters anything else visually.

Incidentally, changing scale(1.2) to scale(i) where i is an integer also seemed to remove the problem which perhaps indicates difficulty with mapping CSS pixels (which can take up several display pixels each) so that as the div scales down it 'leaves behind' parts of the CSS pixel. It would be good if someone could explain this phenomenon.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

you are right removing the transition does fix the problem but does not achieve the same effect, I think you are absolutely right about the pixel mapping, it seems like achieving the desired effect causes issues in CSS so I might use jquery instead sense I'm using bootstrap anyway, thanks.
0

I don't think it's necessary to have both visibility and opacity change as they essentially achieve the same thing. As you have a general transition set on the class, perhaps the two are interfering with each other.

Improve this answer

4 Comments

This answer stackoverflow.com/a/34529598/7659075 may also be useful for determining whether to use 'display', 'visibility' or 'opacity'
I added visibility because the icons movie-card is clickable so adding visibility: hidden takes care of that, on the other hand opacity is there because I want a smooth transition and I can't achieve that with the visibility property and opacity alone is not enough because the clickable icons are still there and can be clicked. with that being said I remove the visibility property just to test it and the problem still occurs.
Upon seeing your codepen, I am wondering if the scale transform is also causing issues. I found this answer, and wonder if it might help you: stackoverflow.com/questions/25799480/…
I tried backface-visibility: hidden and -webkit-transform: translateZ(0) both did not fix the problem.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.