2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSS transformscaleのhoverで画像拡大

Posted at

#画像拡大(ブロック固定なし)
##CSS

<style type="text/css" media="screen">
.scale img {
transition: all 0.2s linear; //開く速さ
}
.scale img:hover {
-webkit-transform: scale(2.4);
-moz-transform: scale(2.4);
-o-transform: scale(2.4);
-ms-transform: scale(2.4);
transform: scale(2.4); //拡大倍率
z-index: 9999;
}	
</style>

#HTML

<div  class="scale" >
<img src="画像パス">
</div>

#画像拡大(ブロック固定)
##CSS

<style type="text/css" media="screen">
.scale{
width:200px;
height:150px;
border:1px solid #ccc;
overflow:hidden;
}
.scale img {
transition: all 0.2s linear; //開く速さ
}
.scale img:hover {
-webkit-transform: scale(2.4);
-moz-transform: scale(2.4);
-o-transform: scale(2.4);
-ms-transform: scale(2.4);
transform: scale(2.4); //拡大倍率
z-index: 9999;
}	
</style>

#HTML

<div  class="scale" >
<img src="画像パス">
</div>
2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?