Why sometimes, when we add images to a page, if we move the mouse over it, does it move? [closed]

Question

Why sometimes, when we add images to a page, if we move the mouse over it, does it move? [closed]

Navigation

#1 by (2 votes)

-4

Because sometimes when we add some images to a page, some people move and others do not? Is this a problem for browsers? Or should the problem be in CSS ?

Why "lightning" when you move the mouse over the image does it move?

SEE THE SITE

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

When you move the mouse, notice that the image moves, it leaves the square. Already the news next to her Premiere for The Invisible Woman when hovering over the image of the woman, this does not happen.

I also noticed 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, but I lose the effects.

html css

asked by anonymous 08.08.2014 / 12:56

1 answer

Responsive design for Android application [closed] How to do insertion at the same time without giving duplicate key error?

score 2 · Answer 1

Come on, I'll answer the basis of what I understood. The Slider image has a zoom effect, increasing the scale in :hover .

Basically the image gets zoomed inside the div, say. If you inspect the element and remove the following lines from the 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, leave the square. Now we are going 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;
}

So by removing these lines you remove this effect.

@edit

Based on the image that passed, I tried to test and see if there was any movement but I could not. The only thing I see being used in :hover is the opacity property that defines transparency.