[alexacosParticipant]

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 !!

[alexacosParticipant]

This reply has been marked as private.

[NicoModerator]

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!

[alexacosParticipant]

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 🙂

[Nabeel AModerator]

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!

[alexacosParticipant]

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 ?

[RadModerator]

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!

[alexacosParticipant]

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 ! 🙂

[FriechModerator]

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!

[alexacosParticipant]

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!!

[Rue NelModerator]

Hello,

To have the fade effect and at the same time prevents the image thumbs from moving, please try this code instead;

.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;

  -webkit-backface-visibility: hidden;
}

The image movement when hovered usually appears on Chrome.

Please let us know if this has worked for you.

[alexacosParticipant]

WOW ! Absolutely did it !! Perfect ! You again had the right answer, incredible. Its highly appreciated !! Thank you !

Alexandra

[Rue NelModerator]

Don’t mention it Alexandra.

We’re happy we’re able to help 😉

[Author]

Posts