最近のWEB事情: 作成者:kiyo 記録日:2015年7月29日21:08
html5, css3 とか新しい設定はどうなっている
最近のWEB事情: 作成者:kiyo 記録日:2015年2月25日21:01
html5, css3 とか新しい設定はどうなっている
最近のWEBは凄いです。
イメージを拡大するJavascriptを作ろうかと思っていたのですが、CSSでイメージをスライドらしき物ができる。
ひょっとCSSでイメージ拡大できるかもと思い調べてみました。
やっぱりありました 早速指定してみました。
*css*
.scale {
width: 400px;
height: 300px;
overflow: hidden;
}
.scale img {
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
}
.scale img:hover {
-webkit-transform: scale(2.0);
-moz-transform: scale(2.0);
-o-transform: scale(2.0);
-ms-transform: scale(2.0);
transform: scale(2.0);
}
*html*
<span class="scale">
<img src="/media/markdownx/2015-02-25-21-55-1424868923278NEC_0134.JPG" width="180" align="left" />
</span>
マウスを乗せると拡大します。