| рони | 01.06.2015 08:23 |
kostyanet,
Google Chrome
Версия 43.0.2357.81 m
Google Chrome
Версия 43.0.2357.81 m
CSS3 transition и transform или JS
Здравствуйте!
Нужна помощь. Задача: есть круг, в нем картинка, при наведении мышки - картинка масштабируется намного(увеличивается). Сам круг и бордер - на месте. (в мозиле все ок, хром, сафари - не обрезает углы, хотя префиксы есть.) эксплорер9 почему-то вообще не видит бордер-радиус. И не откликается на transition и transform. Если есть возможность сделать это кроссбраузерно, (эксплорер от 11), на css - помогите, или подскажите как это сделать на javascript или jquery. Спасибо.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.gallery-block {
overflow:hidden;
border: 5px solid #fdd693;
border-radius: 100px 100px 100px 100px;
width: 195px;
height:195px;
}
.gallery-block img {
transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
-webkit-transition: all 1s ease;
}
.gallery-block img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
cursor: zoom-in;
}
</style>
</head>
<body>
<ul class="main_gallery">
<li class="gallery-block">
<img width="195" height="195" style="border-radius: 100px 100px 100px 100px; border: 0" src="http://islamtv.ru/uploaded_images/islamtv.ru13522100080.34637200.jpeg" />
</li>
<li class="gallery-block">
<a href="#"><img width="195" height="195" style="border-radius: 100px 100px 100px 100px; border: 0" src="http://islamtv.ru/uploaded_images/islamtv.ru13522100080.34637200.jpeg" /></a>
</li>
<li class="gallery-block">
<a href="#"><img width="195" height="195" style="border-radius: 100px 100px 100px 100px; border: 0" src="http://islamtv.ru/uploaded_images/islamtv.ru13522100080.34637200.jpeg" /></a>
</li>
</ul>
</body>
</html>
|
Почему scale? Достаточно размер менять как таковой или в процентах если заранее неизвестно. Как обычно делают. И еще, я сам не проверял, но говорят scale на пикселы действует пагубно.
Увидел хтмл. Ну там просто бред. Радиус на пикселы задавать бестолку и размеры надо в css прописать и ховерить по размеру. |
Что осталось - достаточно для функционирования https://jsfiddle.net/d6tug8oc/
Предлагаю перейти на background, тогда легче будет увеличить по центру-центру. |
kostyanet,
разве ваш вариант решает Цитата:
Цитата:
|
Какие еще углы? Картинка в кружочке по проекту. Да, в хроме список хочет явно получить list-style:none; что, обыкновенно, пихают или сразу в нормализатор, или в родительский класс.
|
Цитата:
в изначальном коде картинка вылезает над кругом , закрывая круг , в вашем тоже самое но под кругом |
Цитата:
Это в каком таком дебильном браузере происходит? Ну, то есть, вы как судите, по себе? Типа я вижу что контейнер из круга превращается в прямоугольник и все равно пощщу ответ с примером? |
Цитата:
Цитата:
|
Вы сами видели эти углы, или на каком основании? Покажите-ка на снимке.
|
kostyanet,
Google Chrome Версия 43.0.2357.81 m |
Харе тупить. Оригинал был кривейший, поэтому так и ховерилось с углами через трансформ. Я выкинул весь мусор и все стало работать по ТЗ. Как убрать просвет на ховере в Хроме написал сразу же следом - list-style:none и чики-пуки.
Вы теперь до морковкиного заговения будете трястись над пятном на своей репутации не смея его помыть с мылом? То есть сказать сори, тупанул, забираю наезд взад - как люди грамотные делают. |
kostyanet,
покажите работающий код, пока его нет. |
Форкните ту филдю добавив list-style:none в стили списка и будет вам кот.
|
Цитата:
|
Узбагойтесь, мне абсолютно безразлично ваше пятно.
|
| Часовой пояс GMT +3, время: 23:09. |