Strange marks appears

Hello everyone, I’m setting a picture that keeps scaling up and down. My code works just fine but the thing is there are a few marks that appear beside my picture on its right side after it scaled back to its original size. I found out that the problem only occurs when I use any photo that I search on Google because I’ve tried a couple of images on Pixabay but nothing happened. Can anyone help me, please? Thank you!

my image link(Mr. Donald Knuth’s photo on Wikipedia) that I want to use:

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9FK9YRJCeVcXiE_ed-TjH-m947VjAJgl65Q&usqp=CAU

Here below is my code:

#image {
	max-width: 330px;
	width: 100%;
	display: block;
	animation-name: in-and-out;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}


@keyframes in-and-out{
	50%{
		transform: scale(1.1);
	}
}

Hello there,

I cannot reproduce the behaviour you mentioned with the code you have given. Would you mind sharing something like a CodePen showing the incorrect behaviour?

Also, remember that any image URL needs to be a link to an image, and not a Google search page.

1 Like

hello Sky020, here is my link:
https://codepen.io/noStacktoHalfstack/pen/vYXwaWQ

Thank you for reviewing it!

Thank you, for linking to that. Unfortunately, I have not seen this before, and cannot think of a way to prevent it, other than match the background color with a border:

 border: 1px solid #ffe6cc;

Place that at the end of the #image selector.

Hope that helps

1 Like

wow, I have no idea how people know this kind of magic. it works perfectly!
Thank you so much!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.