Image move when hover – Themeco Community

Image move when hover

alexacos — Mon, 16 Mar 2015 15:50:39 +0000

I got another reall small question, probably not a big issue !

I applied custom CSS to my website than I found here on the forum after some research just to make disapear the chain Icon on image hover, change color and opacity of the hover. This is the whole code I think :


}
.entry-thumb:before {
    content: none !important;
}

.entry-thumb:before {
    background-color: transparent;
    content: "";
}

.entry-thumb {
    background-color: 
#FFFFFF;
  
}
a.entry-thumb:hover img {
opacity:  0.7;
filter: alpha(opacity=1);
zoom: 1;

}

Problem is, the image seem to move a bit to the right when I put my cursor on it… Any way to fix that ? Is it a chrome issue ? Or my code ?

Thanks a lot !!

Reply To: Image move when hover

alexacos — Mon, 16 Mar 2015 15:50:56 +0000

This reply has been marked as private.

Reply To: Image move when hover

Nico — Mon, 16 Mar 2015 18:51:21 +0000

Hi There,

Thanks for writing in.

Try to add this in your Customizer’s Custom CSS:

.entry-thumb img{
transition:none;
-webkit-transition:none;
}

Hope it helps.

Cheers!

Reply To: Image move when hover

alexacos — Wed, 18 Mar 2015 19:37:22 +0000

It do work, but there is no fading anymore. Any way to keep the fading and only fix the problem of the image moving ?

Thanks 🙂

Reply To: Image move when hover

Nabeel A — Wed, 18 Mar 2015 21:06:31 +0000

Hi again,

It seems like you’ve sorted it out. on hover i am getting the fading effect. Here is the code if you still need it:

.entry-thumb img {
-o-transition: opacity 0.75s ease;
-moz-transition: opacity 0.75s ease;
-webkit-transition: opacity 0.75s ease;
transition: opacity 0.75s ease;
}

Hope this helps!

Reply To: Image move when hover

alexacos — Wed, 18 Mar 2015 21:35:49 +0000

So I added this code :


.entry-thumb img{
transition:none;
-webkit-transition:none;
}

results : no fading effect.
so right after this code, I added yours :


.entry-thumb img {
-o-transition: opacity 0.75s ease;
-moz-transition: opacity 0.75s ease;
-webkit-transition: opacity 0.75s ease;
transition: opacity 0.75s ease;
}

and the images start to « expand » or changing size again when hovering effect… So its really the effect who’s messing up all this… As soon I add the fading effect, the image size change… any clue ?

Reply To: Image move when hover

Rad — Wed, 18 Mar 2015 23:29:20 +0000

Hi there,

I don’t really see the issue about change size when hovering with effects. Would you mind providing a video recording of what you’re getting?

But, I can see that clarity changes when hovering with effect. Example, the image with typewriter shows grid lines when hovered. It’s not re-sized, but the depth and clarity changes because the typewriter stays on same size.

Thanks!

Reply To: Image move when hover

alexacos — Thu, 19 Mar 2015 02:23:48 +0000

http://leloft.tv/wp-content/uploads/2015/03/IMG_6157.mov small video, 1mb only, .MOV, want me to convert it or its fine ? You’ll see the « size change » and coming back to normal, it only happen when the hover fade.

Thanks ! 🙂

Reply To: Image move when hover

Friech — Thu, 19 Mar 2015 06:37:25 +0000

Hi There,

Thank you for the video, I’ve tried to fix it, But just like the first post it seems that the transition property is the only thing causing this. And it seems that the issue is only occurring on chrome, so this could be an browser compatibility. What you could do for now is to disable the transition only on chrome.

.entry-thumb img {-webkit-transition:none;}

Cheers!

Reply To: Image move when hover

alexacos — Thu, 19 Mar 2015 20:08:09 +0000

Its quite strange, I just wanted the hover to be the same than when lightbox are used. No icon, and a small white fading in… I dont get this problem when I create lightbox, I just get a smooth fade, and nothing move! But as soon I try to get this on my fornt page, it don’t work properly. Since the effect is the same on the lightbox than I want my font page thumbnail is there any code who may force the image and hover inside the box, or I dont know.. Like I say, I dont get any problem with any other hover, juste my front page one’s… I hope disabling transition on chrome is not the only possibility because like I said, lightbox transition do work fine for me !

Thanks again!!