.gif меняет размер на mousover

Question

Я хочу, чтобы gif запускался, когда указатель мыши над изображением. запускается при наведении курсора, но изменяется на свой первоначальный размер, уменьшая его. Я хочу, чтобы ".stati c" и ".stati c: hover" были одинакового размера. Я использовал:

.container4 {
    margin:0 auto;
    width:1080px;
    height:500px;
    padding-top:100px;
    background-color:floralwhite;
}

.static {
    position:absolute;
    background: white;
    height: 140px;
    width: 300px;
}

.static:hover {
    opacity:0;
    height: 140px;
    width: 300px;
}

<div class="container4">
    <img class="static" src="imagenes/acampada.jpg">
    <img class="hover" src="media/acampada.gif">
</div>

Так что пост не загроможден кодом, я поместил все это здесь на случай, если вам это нужно.

Answer 1

Есть два решения, о которых я могу подумать.

Решение 1: Попробуйте сделать <div> фиксированного размера и поместить изображения на фон <div>. Таким образом, при наведении курсора на фоновое изображение будет gif, в противном случае это будет статическое c изображение.

Решение 2: Если ваши изображения загружаются динамически, тогда вы должны сделать все изображения такие же размеры с CSS или без CSS (с любым фоторедактором). Если вы не можете сделать все изображения одинакового размера, то, по крайней мере, создайте пару изображений одинакового размера (например, stati c и наведение одного изображения должно быть одинакового размера).