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>
|
