Алмаз

Если я правильно понял, то вам нужно div'у задать фоновое изображение 1-ым изображением, а второе маштабируйте по блоку и при ховере делаете его display: block, либо opacity: 1;

2 вопрос: С чего вы так решили? Поставьте второму изображению position: absolute;

Решение оказалось довольное простое: Нужно поменять строки местами, т.е. правило пагинации переместить выше первого правила.

Придется сделать так:

<table>
    <tr>
        <td></td>
        <td class="desktop"></td>
        <td class="desktop"></td>
    </tr>
    <tr class="mobile">
        <td></td>
        <td></td>
    </tr>
</table>

При определенных media скрывать один из классов, а другой показывать. Плохо то, что довольно много раз дублируется информация.
Можно это сделать и на div'ах. Кому как удобнее.