How can i get rid of glitch in images on hover (Css3 hover on effect)

Question

This is the url of my website: Website

As u can see that there is a main yellow image on home page. Actually there are 11 images. I show them on mouse hovers. On hovering an image the top image hides and the bottom image appears i have done this by opacity and css3 animations for smooth transition. There are few problems in them.

1) when we hover on images a glitch comes on that respective image. (The image gets a little bigger and than gets smaller. It appears mostly in chrome. Plus on very high resolutions all image alignment also gets disturb. Glitch only comes in image 3

2) I want to show my page up to yellow image in all screens weather its 1280*780 or 2280*1600 etc.

Answer 1

The "glitch" is because your imgs do not have exactly the same margins after applying CSS. There are 5 main parts to your yellow part1 . You defined each to be width:20% , which is ultimately a fluid size according to the width of window, but you added an absolute margin of 2px / 3px to the top of some images, which is independent of your window size.

You should not do this as 20% may evaluate to different pixel values - it will be 200px in a window of width 1000px, it will be 204px in a window of width 1024px. Consequently, your img heights will also vary at different window sizes. Your top margin of 2px / 3px would only work at a very specific window width, and fail to work for the majority of other resolutions. Remember, everything ultimately renders as px .

Looking through your source, you also have quite a few other problems in the HTML and CSS.

1) You are using <img> tags for your pictures. Your #bottom images are nested inside <p> and styled to be width: 20% of the <p> , your #top images are styled to be 100% of its parent, copy1 - copy5 . Because they depend on different parents, it's tedious and tiring to trace the positions, margins, paddings of each parent and each image. Try to be consistent and make it more predictable when you want things to be overlaid exactly.

2) It is not legal to have multiple tags with same id , eg #bottom .

What you could / should do:

1. Redo the images (Photoshop or otherwise), to make sure they line up exactly without the need for CSS margins.

2. After you have done 1 , redo your HTML and CSS to make it better/legal. I'd also encourage you to use inline-block rather than floats. A sample here (I have kept the class names as close to yours as possible, and retained use of <img> for this effect):

 .parts1 { position: relative; width: 100%; } .copy { display: inline-block; vertical-align: top; position: relative; width: 20%; } .top { position: absolute; width: 100%; opacity: 0; } .bottom { position: absolute; width: 100%; } .copy:hover > .top { opacity: 1; transition: opacity 1s ease-in-out 0s; } 

 <div class="parts1"> <div class="copy" id="copy1"> <img class="bottom" alt="Bottom1" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/plain1.png" /> <img class="top" alt="Top1" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U2.png" /> </div><div class="copy" id="copy2"> <img class="bottom" alt="Bottom2" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U4.png" /> <img class="top" alt="Top2" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U3.png" /> </div><div class="copy" id="copy3"> <img class="bottom" alt="Bottom3" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U5.png" /> <img class="top" alt="Top3" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U6.png" /> </div><div class="copy" id="copy4"> <img class="bottom" alt="Bottom4" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U7.png" /> <img class="top" alt="Top4" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U8.png" /> </div><div class="copy" id="copy5"> <img class="bottom" alt="Bottom5" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U9.png" /> <img class="top" alt="Top5" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U10.png" /> </div> </div> 

If you have done this correctly, the actual window size does not really matter. It will scale to all sizes.