Хочу сделать эффект, чтобы картинка при наведении курсора плавно увеличивалась из центра, но при этом оставалась внутри фрейма. Пытался сначала сделать это виджетом "state transition button": картинку сделал размером 500 на 444, поставил заливкой во фрейм 300 на 337, в стандартном состоянии поставил режим "заполнение", а при наведении курсора - "исходный размер". Но получилось не увеличение, а какое-то уродливое моргание.
Потом нашёл в похожем топике такой вод код:
<styletype="text/css">
html { overflow-x: hidden;}
body { overflow-x: hidden;}</style><styletype="text/css">.myclass {
overflow:hidden !important;
width:294px;}
img.myclass{-moz-transition: all 1s ease-out;-o-transition: all 1s ease-out;-webkit-transition: all 1s ease-out;}
img.myclass:hover {-webkit-transform: scale(1.5) translate(-30px);-moz-transform: scale(1.5) translate(-30px);-o-transform: scale(1.5) translate(-30px);
transform: scale(1.5) translate(-30px);}</style>
Если я правильно его скопировал — как привязать класс к нужному элементу? Прописывал в "гиперссылки" нечто вроде "class img.myclass" или ".img.myclass", но это не работало.
Хочу сделать эффект, чтобы картинка при наведении курсора плавно увеличивалась из центра, но при этом оставалась внутри фрейма. Пытался сначала сделать это виджетом "state transition button": картинку сделал размером 500 на 444, поставил заливкой во фрейм 300 на 337, в стандартном состоянии поставил режим "заполнение", а при наведении курсора - "исходный размер". Но получилось не увеличение, а какое-то уродливое моргание.
Потом нашёл в похожем топике такой вод код:
Если я правильно его скопировал — как привязать класс к нужному элементу? Прописывал в "гиперссылки" нечто вроде "class img.myclass" или ".img.myclass", но это не работало.
Share this post
Link to post