質問編集履歴
7
中心スケールバージョン追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -87,7 +87,22 @@
|
|
|
87
87
|
}
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
+
また、中心にスケールさせる方法もご教示頂きました。
|
|
91
|
+
img-1:hoverに追記する形で
|
|
90
92
|
|
|
93
|
+
```css
|
|
94
|
+
.img-1:hover {
|
|
95
|
+
background-size: 200px;
|
|
96
|
+
background-position: 50%;
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
とすると、中心にぬるっとスケールするバージョンもできました。
|
|
100
|
+
|
|
101
|
+
- chromeで表示
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
91
106
|
##追記(2) 正常に実装できました
|
|
92
107
|
|
|
93
108
|
色々試してみたのですが以下のコードで狙った動作をChromeでも実装できました！
|
|
@@ -95,6 +110,9 @@
|
|
|
95
110
|
- Chromeで表示
|
|
96
111
|
|
|
97
112
|
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
98
116
|
```html
|
|
99
117
|
<div class="img-block"><img src="img/sample.jpg"></div>
|
|
100
118
|
```
|
6
説明追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
```
|
|
52
52
|
|
|
53
53
|
##追記(1) MasakazuFukamiさんの方法
|
|
54
|
+
background-imageを操作する方法です。
|
|
54
55
|
こういった方法もあるんですね。大変勉強になります。
|
|
55
56
|
|
|
56
57
|
- Chromeで表示
|
5
z-indexのtypo
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -126,5 +126,5 @@
|
|
|
126
126
|
|
|
127
127
|
親要素のimg-blockを、
|
|
128
128
|
- position:relative
|
|
129
|
-
- indexを指定
|
|
129
|
+
- z-indexを指定
|
|
130
130
|
する必要があったようです!
|
4
説明文を変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -124,4 +124,7 @@
|
|
|
124
124
|
}
|
|
125
125
|
```
|
|
126
126
|
|
|
127
|
+
親要素のimg-blockを、
|
|
127
|
-
position:relative
|
|
128
|
+
- position:relative
|
|
129
|
+
- indexを指定
|
|
130
|
+
する必要があったようです!
|
3
追記 解決案
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -48,4 +48,80 @@
|
|
|
48
48
|
-webkit-transform: scale(1.3);
|
|
49
49
|
transform: scale(1.3);
|
|
50
50
|
}
|
|
51
|
-
```
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
##追記(1) MasakazuFukamiさんの方法
|
|
54
|
+
こういった方法もあるんですね。大変勉強になります。
|
|
55
|
+
|
|
56
|
+
- Chromeで表示
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<div class="img-block">
|
|
61
|
+
<div class="img-1"></div>
|
|
62
|
+
</div>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
```css
|
|
66
|
+
|
|
67
|
+
.img-block {
|
|
68
|
+
width: 150px;
|
|
69
|
+
height: 150px;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
border: 10px solid #CCC;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.img-1 {
|
|
76
|
+
width: 150px;
|
|
77
|
+
height: 150px;
|
|
78
|
+
background:url(../img/sample.jpg);
|
|
79
|
+
background-size: 150px;
|
|
80
|
+
-webkit-transition: .3s ease-in-out;
|
|
81
|
+
transition: .3s ease-in-out;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.img-1:hover {
|
|
85
|
+
background-size: 200px;
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
##追記(2) 正常に実装できました
|
|
91
|
+
|
|
92
|
+
色々試してみたのですが以下のコードで狙った動作をChromeでも実装できました！
|
|
93
|
+
|
|
94
|
+
- Chromeで表示
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<div class="img-block"><img src="img/sample.jpg"></div>
|
|
99
|
+
```
|
|
100
|
+
```css
|
|
101
|
+
.img-block {
|
|
102
|
+
width:150px;
|
|
103
|
+
height:150px;
|
|
104
|
+
border-radius:50%;
|
|
105
|
+
border: 10px solid #CCC;
|
|
106
|
+
|
|
107
|
+
position:relative;
|
|
108
|
+
overflow:hidden;
|
|
109
|
+
z-index:1;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.img-block > img {
|
|
113
|
+
width: 150px;
|
|
114
|
+
height: 150px;
|
|
115
|
+
-webkit-transform: scale(1);
|
|
116
|
+
transform: scale(1);
|
|
117
|
+
-webkit-transition:all .2s ease;
|
|
118
|
+
transition:all .2s ease;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.img-block:hover img{
|
|
122
|
+
-webkit-transform:scale(1.2);
|
|
123
|
+
transform:scale(1.2);
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
position:relativeにして、なおかつz-indexをしっかり明示させてあげる必要があったようです。
|
2
説明を変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
CSSによって丸くした画像をhoverで拡大させる方法
|
|
1
|
+
CSSによって丸くした要素の中に置いた画像をhoverで拡大させる方法
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
現在、CSSを使って、正方形の画像を
|
|
1
|
+
現在、CSSを使って、丸い要素を用意しその中に正方形の画像を配置し、その画像をhoverで拡大させるというWEBデザインを実装しようとしています。
|
|
2
2
|
|
|
3
3
|
[CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト](http://www.nxworld.net/tips/css-image-hover-effects.html)
|
|
4
4
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
hoverの動作中にimgの画像が前面に出てきてしまっています。
|
|
17
|
+
hoverの動作中にimgの画像が前面に出てきてしまっています。一時的にoverflowを無視するような形になっているのでしょうか。
|
|
18
18
|
|
|
19
19
|
z-indexを指定するなどしてみたのですが、うまくいきませんでした。
|
|
20
20
|
どのようにすれば、chromeでも正常に動くのでしょうか？
|
1
誤字訂正と .img-blockの重複したwidthをheightに変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
hoverの動作中にimgの画像が
|
|
17
|
+
hoverの動作中にimgの画像が前面に出てきてしまっています。
|
|
18
18
|
|
|
19
19
|
z-indexを指定するなどしてみたのですが、うまくいきませんでした。
|
|
20
20
|
どのようにすれば、chromeでも正常に動くのでしょうか？
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
.img-block img {
|
|
39
39
|
width: 150px;
|
|
40
|
-
|
|
40
|
+
height: 150px;
|
|
41
41
|
-webkit-transform: scale(1);
|
|
42
42
|
transform: scale(1);
|
|
43
43
|
-webkit-transition: .3s ease-in-out;
|