У меня есть div
, который я трансформирую (масштабирую и перевожу), но внутри этого div
у меня есть еще один div
. Теперь я хотел бы увидеть, что на внутренний div
, другими словами, не влияет преобразование его родителя. Я бы хотел, чтобы внутренний div
не масштабировался, как его родитель.
Вот HTML:
<div id="rightsection">
<div class="top"></div>
<div class="middle">
<div class="large">
<img src="assets/images/rightpanel_expanded.png" alt="map" title="map"/>
</div>
</div>
<div class="bottom">
<p>Check if your friends are going!</p>
</div>
</div>
Вот мой CSS:
#rightsection:hover {
-moz-transform:scale(2.16,2.8) translate(-80px,-53px);
-webkit-transform:scale(2.16,2.8) translate(-80px,-53px);
-o-transform:scale(2.16,2.8) translate(-80px,-53px);
-ms-transform:scale(2.16,2.8) translate(-80px,-53px);
transform:scale(2.16,2.8) translate(-80px,-53px)
}
Итак, проблема в том, что когда я масштабирую #rightsection
, img
масштабируется до, но я хотел бы сохранить изображение в исходном размере.
Любая помощь приветствуется.