Strange marks appears

HTML-CSS
#1

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);
	}
}
#2

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
#3

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

Thank you for reviewing it!

#4

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
#5

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