Because sometimes, when you add images to a page, if you mouse over it, does it move?

Question

Because sometimes, when you add images to a page, if you mouse over it, does it move?

Asked 10 years, 3 months ago

Viewed 503 times

-4

Because sometimes when we add some images on a page, some move and others don’t? That’s a problem browsers? Or the problem must be in the CSS?

Why "damn" when you mouse over the image it moves?

SEE THE WEBSITE

Hover your mouse over the news image Make The Perfect Dessert in Ten Mins (under the slider).

inserir a descrição da imagem aqui

When passing the mouse, note that the image moves, it leaves the square. Already the news next to it Premiere for The Invisible Woman when passing the mouse over the image of the woman, does not occur this.

I could also tell by the tool Inspecionar Elemento of Google Chrome that disabling some properties like:

.wp-post-image:hover {opacity:0.8}
.appear {-webkit-transition:all .4s ease-in-out}

This problem ends, only I lose the effects.

It’s a problem with your CSS. Check that you don’t have any properties applied to the images

– CesarMiguel

2014/08/08 at 11:02
Look at this site: http://theme-sphere.com/smart-mag/ Now hover over the news image Make The Perfect Dessert in Ten Mins below the slider. (Use Chrome)

– Alexandre Lopes

2014/08/08 at 11:08
1

Yes, this is a css effect applied to the image

– CesarMiguel

2014/08/08 at 11:10
Ahhh is true, the problem is opacity with the -webkit-transition in the :hover (I just tested it). But how do I fix it? I don’t want to have to remove the effects.

– Alexandre Lopes

2014/08/08 at 11:12
So let me get this straight... you want some images with that effect, and you want some without the effects, that’s it?

– CesarMiguel

2014/08/08 at 11:39
No! I just want to fix this problem by hovering.

– Alexandre Lopes

2014/08/08 at 11:40
1

If you don’t want to remove the effects, what do you want? Take the effects only when the mouse passes? So it will never produce the effect of blurring the image... lol I’m no longer understanding anything...

– CesarMiguel

2014/08/08 at 11:43
I don’t want to remove anything, absolutely nothing! I just want some way to end this mini bug. It only ends if I disable the opacity or the -webkit-transition in the :hover, but I don’t want to do that. I just wanted some solution that would end this problem.

– Alexandre Lopes

2014/08/08 at 11:47
It’s not at all clear what you’re asking. Bug? But what bug? Put your CSS to the question and clarify your problem

– CesarMiguel

2014/08/08 at 11:49
Young man, just enter the link I sent you and you will see that by hovering over the second image in the news below the slider moves when you hover over.

– Alexandre Lopes

2014/08/08 at 11:52
You don’t want to, then you wonder why the question is closed

– CesarMiguel

2014/08/08 at 11:53
Why do you keep voting to close my question? It’s not my fault if you don’t know how to use the Chrome tool Inspecionar Elemento just do this in the image and you will see all the classes and properties of the inspected element. Test it.

– Alexandre Lopes

2014/08/08 at 12:00
This is not my site.

– Alexandre Lopes

2014/08/08 at 12:11
3

Your question is not being objective. From what I understand, your application is doing the same as the website you demonstrated, right? If so, consider adding lines of code to your problem. If you are just inspecting a third party page and trying to understand something, be clear! Demonstrate with an image for example.

– Rafael Barbosa

2014/08/08 at 12:28
I tested with Firefox, Chrome, Opera, Safari and IE, and in none of them the image you referred moved.

– Math

2014/08/08 at 12:40
@Math only when passing or mouse over.

– Alexandre Lopes

2014/08/08 at 12:58
@Alexandrelopes I passed, exactly in the image that you just added, and I passed in the woman next, and there occurred the error that you quoted in either of the two images, only the effect that was to happen. Which browser you used?

– Math

2014/08/08 at 13:00
I used Google Chrome (Last Version), and I used Firefox, only in it (Firefox) instead of moving the mouse, the image is bigger than it is supposed to be, about 1px.

– Alexandre Lopes

2014/08/08 at 13:08

Show 13 more comments

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Rafael Barbosa • **2,855** points · Answer 1 · 2014-08-08T12:49:55+00:00

Come on, I’ll answer the basis of what I understand. The image of Slider received a zoom effect, increasing the scale in the :hover.

Basically the image gets a zoom inside the div, say. If you inspect the element and remove the following lines from css:

/* image zoom effect */
.main-featured .slides .image-link, .main-featured .blocks .image-link {
    display: block;
    overflow: hidden;

    -webkit-transform: translate3d(0, 0, 0);
}

You will notice that now the image will grow and in fact, come out of the square. Now let’s go to the second part.

The internal zoom effect is given by this code:

.main-featured .blocks article:hover img, .main-featured .slides .flex-active-slide:hover img { 

    /* fix flicker and use hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;

    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -moz-transform: scale(1.1) rotate(0.1deg);  /* firefox flicker fix */

    opacity: 0.9;
}

Therefore, by removing these lines you remove this effect.

@Edit

Based on the image you passed, I tried to test and see if you could find any movement but I couldn’t. The only thing I see being used in :hover is the property opacity defining transparency.

Antes e depois do :hover