Доброго времени суток, уважаемые!
Наткнулся на такую проблему: при наведении надо анимировать находящееся в блоке изображение (чтобы рисунок уезжал вверх).
Ну, стандартно в общем. НО проблема в том, что родительский блок имеет закругленные углы: border-radius: 35px 0 35px 0;
Ну и соответственно, чтобы дочернее изображение не вылезало за пределы, этому блоку прикручено overflow: hidden;
Затем просто пишем простейшее свойство по hover, открываем сей шЫдевр вёрстки в браузере Opera... и начинается магия =(
Изображение, которое чинно и благородно сидело под overflow: hidden; при анимации начинает всеми углами выпирать из родительского элемента! Плевало оно и на radius и hidden. Пока идет анимация углы торчат.
Что делать не представляю. =((
Единственно, что пришло на ум, это и блоку изображения так же радиус родителя ручками прописать. Но... может есть грамотное решение?
з.ы. В Фаерфоксе всё работает корректно.
Код:
https://jsfiddle.net/KatSSS/6pzf77w0/.aside_map_frame {
height: 100%;
border: 4px solid #B4811C;
border-radius: 35px 0 35px 0;
-moz-border-radius: 35px 0 35px 0;
-webkit-border-radius: 35px 0 35px 0;
overflow: hidden;
z-index: 10;
}
.aside_map_img {
position: relative;
background: transparent url('http://posterok.com/photo/big/POK01492_1.jpg') no-repeat scroll center center;
background-size: cover;
background-color: #f5eccd;
min-height: 100%;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.aside_map_img:hover {
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
}
<div class="aside_map_frame">
<div class="aside_map_img"></div>
</div>
