回答編集履歴
2
追記
answer
CHANGED
|
@@ -30,4 +30,16 @@
|
|
|
30
30
|
}
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
[CodePenサンプル](https://codepen.io/hatena19/pen/oNxdoRb)
|
|
33
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/oNxdoRb)
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
torakunさんの回答のように display: flex; で位置決めした方かシンプルになりますね。
|
|
37
|
+
その場合は、画像（#top img）の margin-top で画像か中央にくるように調整すればいいですね。
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
#top img{
|
|
41
|
+
margin-top: 140px;
|
|
42
|
+
max-width: 100%;
|
|
43
|
+
height: auto;
|
|
44
|
+
}
|
|
45
|
+
```
|
1
サンプルリンク追加
answer
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
位置決めを position: absolute; で。
|
|
1
|
-
hover時の transform に translate(-50%,-50%) が必要です。
|
|
2
|
+
その場合、hover時の transform に translate(-50%,-50%) が必要です。
|
|
2
|
-
位置決めは position: absolute; で。
|
|
3
3
|
|
|
4
4
|
下記でどうでしょうか。
|
|
5
5
|
|
|
@@ -28,4 +28,6 @@
|
|
|
28
28
|
-webkit-transform: translate(-50%,-50%) rotateY(360deg);
|
|
29
29
|
transform: translate(-50%,-50%) rotateY(360deg);
|
|
30
30
|
}
|
|
31
|
-
```
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/oNxdoRb)
|