teratail
回答率
86.02%
質問するログイン新規登録
トップに関する質問CSSによって丸くした要素の中に置いた画像をhoverで拡大させる方法

編集履歴

質問編集履歴

7

中心スケールバージョン追記

2015/09/06 15:30

投稿

azuno_mix
azuno_mix

score71

test CHANGED
File without changes
test CHANGED
@@ -176,6 +176,36 @@
176
176
 
177
177
 
178
178
 
179
+ また、中心にスケールさせる方法もご教示頂きました。
180
+
181
+ img-1:hoverに追記する形で
182
+
183
+
184
+
185
+ ```css
186
+
187
+ .img-1:hover {
188
+
189
+ background-size: 200px;
190
+
191
+ background-position: 50%;
192
+
193
+ }
194
+
195
+ ```
196
+
197
+ とすると、中心にぬるっとスケールするバージョンもできました。
198
+
199
+
200
+
201
+ - chromeで表示
202
+
203
+
204
+
205
+ ![Fukamiさんの方法2](03e160ea6b47e61dc267dfb2a9a0e99f.gif)
206
+
207
+
208
+
179
209
 
180
210
 
181
211
  ##追記(2) 正常に実装できました
@@ -192,6 +222,12 @@
192
222
 
193
223
 
194
224
 
225
+
226
+
227
+
228
+
229
+
230
+
195
231
  ```html
196
232
 
197
233
  <div class="img-block"><img src="img/sample.jpg"></div>

6

説明追記

2015/09/06 15:30

投稿

azuno_mix
azuno_mix

score71

test CHANGED
File without changes
test CHANGED
@@ -104,6 +104,8 @@
104
104
 
105
105
  ##追記(1) MasakazuFukamiさんの方法
106
106
 
107
+ background-imageを操作する方法です。
108
+
107
109
  こういった方法もあるんですね。大変勉強になります。
108
110
 
109
111
 

5

z-indexのtypo

2015/09/05 01:39

投稿

azuno_mix
azuno_mix

score71

test CHANGED
File without changes
test CHANGED
@@ -254,6 +254,6 @@
254
254
 
255
255
  - position:relative
256
256
 
257
- - indexを指定
257
+ - z-indexを指定
258
258
 
259
259
  する必要があったようです!

4

説明文を変更

2015/09/05 01:38

投稿

azuno_mix
azuno_mix

score71

test CHANGED
File without changes
test CHANGED
@@ -250,4 +250,10 @@
250
250
 
251
251
 
252
252
 
253
+ 親要素のimg-blockを、
254
+
253
- position:relativeにして、なおかつz-indexをしっかり明示させてあげる必要があったようです。
255
+ - position:relative
256
+
257
+ - indexを指定
258
+
259
+ する必要があったようです!

3

追記　解決案

2015/09/05 01:34

投稿

azuno_mix
azuno_mix

score71

test CHANGED
File without changes
test CHANGED
@@ -99,3 +99,155 @@
99
99
  }
100
100
 
101
101
  ```
102
+
103
+
104
+
105
+ ##追記(1) MasakazuFukamiさんの方法
106
+
107
+ こういった方法もあるんですね。大変勉強になります。
108
+
109
+
110
+
111
+ - Chromeで表示
112
+
113
+ ![Fukamiさんの方法](11d7a7a03b832791ceac0979fae2de0a.gif)
114
+
115
+
116
+
117
+ ```html
118
+
119
+ <div class="img-block">
120
+
121
+ <div class="img-1"></div>
122
+
123
+ </div>
124
+
125
+ ```
126
+
127
+
128
+
129
+ ```css
130
+
131
+
132
+
133
+ .img-block {
134
+
135
+ width: 150px;
136
+
137
+ height: 150px;
138
+
139
+ overflow: hidden;
140
+
141
+ border-radius: 50%;
142
+
143
+ border: 10px solid #CCC;
144
+
145
+ }
146
+
147
+
148
+
149
+ .img-1 {
150
+
151
+ width: 150px;
152
+
153
+ height: 150px;
154
+
155
+ background:url(../img/sample.jpg);
156
+
157
+ background-size: 150px;
158
+
159
+ -webkit-transition: .3s ease-in-out;
160
+
161
+ transition: .3s ease-in-out;
162
+
163
+ }
164
+
165
+
166
+
167
+ .img-1:hover {
168
+
169
+ background-size: 200px;
170
+
171
+ }
172
+
173
+ ```
174
+
175
+
176
+
177
+
178
+
179
+ ##追記(2) 正常に実装できました
180
+
181
+
182
+
183
+ 色々試してみたのですが以下のコードで狙った動作をChromeでも実装できました！
184
+
185
+
186
+
187
+ - Chromeで表示
188
+
189
+ ![chrome成功例](d75dd30e3a0a8aa8b04f16b8696e2175.gif)
190
+
191
+
192
+
193
+ ```html
194
+
195
+ <div class="img-block"><img src="img/sample.jpg"></div>
196
+
197
+ ```
198
+
199
+ ```css
200
+
201
+ .img-block {
202
+
203
+ width:150px;
204
+
205
+ height:150px;
206
+
207
+ border-radius:50%;
208
+
209
+ border: 10px solid #CCC;
210
+
211
+
212
+
213
+ position:relative;
214
+
215
+ overflow:hidden;
216
+
217
+ z-index:1;
218
+
219
+ }
220
+
221
+
222
+
223
+ .img-block > img {
224
+
225
+ width: 150px;
226
+
227
+ height: 150px;
228
+
229
+ -webkit-transform: scale(1);
230
+
231
+ transform: scale(1);
232
+
233
+ -webkit-transition:all .2s ease;
234
+
235
+ transition:all .2s ease;
236
+
237
+ }
238
+
239
+
240
+
241
+ .img-block:hover img{
242
+
243
+ -webkit-transform:scale(1.2);
244
+
245
+ transform:scale(1.2);
246
+
247
+ }
248
+
249
+ ```
250
+
251
+
252
+
253
+ position:relativeにして、なおかつz-indexをしっかり明示させてあげる必要があったようです。

2

説明を変更

2015/09/05 01:30

投稿

azuno_mix
azuno_mix

score71

test CHANGED
@@ -1 +1 @@
1
- CSSによって丸くした画像をhoverで拡大させる方法
1
+ CSSによって丸くした要素の中に置いた画像をhoverで拡大させる方法
test CHANGED
@@ -1,4 +1,4 @@
1
- 現在、CSSを使って、正方形の画像を丸く切り抜き、その画像をhoverで拡大させるというWEBデザインを実装しようとしています。
1
+ 現在、CSSを使って、丸い要素を用意しその中に正方形の画像を配置し、その画像をhoverで拡大させるというWEBデザインを実装しようとしています。
2
2
 
3
3
 
4
4
 
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- hoverの動作中にimgの画像が前面に出てきてしまっています。
33
+ hoverの動作中にimgの画像が前面に出てきてしまっています。一時的にoverflowを無視するような形になっているのでしょうか。
34
34
 
35
35
 
36
36
 

1

誤字訂正と .img-blockの重複したwidthをheightに変更

2015/09/04 05:30

投稿

azuno_mix
azuno_mix

score71

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- hoverの動作中にimgの画像が全面に出てきてしまっています。
33
+ hoverの動作中にimgの画像が前面に出てきてしまっています。
34
34
 
35
35
 
36
36
 
@@ -76,7 +76,7 @@
76
76
 
77
77
  width: 150px;
78
78
 
79
- width: 150px;
79
+ height: 150px;
80
80
 
81
81
  -webkit-transform: scale(1);
82
82