Transitioning when its not suppose to be

Hello, I’m working with my student on a problem happening specifically in Glitch. In her project, she added a transition to her image that is supposed to happen on hover. But for some reason, the image element with the transition on it moves from top to bottom (roughly 20px) on page load. She did not style it to do this, only the on hover should be moving this image element. I have noticed this happening with other elements I put any amount of transition onto. I exported her project and looked at it on a local server to see if it was still doing the same thing and it was not. So I am thinking it’s a glitch problem?

You can see an example here, where it says ‘COMFORTABLE IN MY OWN SKIN’ is the element in question.

Can anyone please help! Thank you

It’s probably not a problem with Glitch.

You see, the code from what I found looked like this

image

in img1, which is why it moves down. Move that to when you add your hover effect, which should look like

.img1 {
  width: 400px;
  opacity:0;
/*   transition-duration: 2s; */  
}

.img1:hover {
  opacity:1;
  transform: translate(0%, -96%);
  transition-duration: 1.3s;
}

@dearnaomichan

@code-alt
But even when I take that out, the slight transition down is still happening on load. And why wouldnt I see it happening on my local server? Feel free to look at this project page: https://glitch.com/~whispering-lydian-magpie

I have fixed your problem

By removing a few unneeded lines you can view the project at

This isn’t an error with Glitch, to my belief as well. I think it may vary via operating system/browser as they use different web standards

2 Likes

Wow thank you for finding that for me!!

1 Like