teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップに関する質問hover時に画像をマスクして下から文字がスライドするCSS

編集履歴

質問編集履歴

3

修正

2020/08/11 13:52

投稿

_arukuneko
_arukuneko

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,8 @@
1
- 今のままだと、hoverする前から半透明の背景と文字が画像の上に乗っています・・・
1
+ 今のままだと、下から文字がスライドしません
2
+
3
+ 文字を下からスライドさせたいです
4
+
5
+
2
6
 
3
7
 
4
8
 
@@ -8,13 +12,13 @@
8
12
 
9
13
  <div class="designs">
10
14
 
15
+
16
+
11
17
  <div class="design">
12
18
 
13
- <a href="#"><img src="portfolio_images/paspol.png">
19
+ <a href="#"><img src="portfolio_images/portfolio_top.png"></a>
14
20
 
15
- <span class="mask">It's fresh!</span>
21
+ <div class="design-text"><p><b>ポートフォリオ</b></p></div>
16
-
17
- </a>
18
22
 
19
23
  </div>
20
24
 
@@ -66,11 +70,11 @@
66
70
 
67
71
 
68
72
 
69
- .mask{
73
+ .design-text{
70
74
 
71
- width: 300px;
75
+ width:300px;
72
76
 
73
- height: 200px;
77
+ height:200px;
74
78
 
75
79
  position: absolute;
76
80
 
@@ -94,26 +98,24 @@
94
98
 
95
99
  text-align: center;
96
100
 
101
+ }
102
+
103
+
104
+
97
- padding: 30px;
105
+ .design-text:hover{
98
106
 
99
107
  opacity: 1;
100
108
 
101
109
  transition: all 0.6s ease;
102
110
 
103
- padding-bottom: 0;
104
-
105
111
  }
106
112
 
107
113
 
108
114
 
109
- .design:hover.mask {
115
+ .design-text p{
110
116
 
111
- 　padding-bottom: 30px;
117
+ padding-left: 20px;
112
118
 
113
119
  }
114
120
 
115
-
116
-
117
-
118
-
119
121
  ```

2

修正

2020/08/11 13:52

投稿

_arukuneko
_arukuneko

スコア19

test CHANGED
File without changes
test CHANGED
@@ -23,6 +23,8 @@
23
23
 
24
24
 
25
25
  ```CSS
26
+
27
+ .designs{
26
28
 
27
29
  height: 434px;
28
30
 

1

修正

2020/08/09 14:03

投稿

_arukuneko
_arukuneko

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,20 +1,20 @@
1
- 今のままだと、単純に画像の下に文字が表示され、hoverすると文字が消えます・・・
1
+ 今のままだと、hoverする前から半透明の背景と文字が画像の上に乗っています・・・
2
2
 
3
3
 
4
4
 
5
5
  ```HTML
6
6
 
7
+
8
+
7
9
  <div class="designs">
8
10
 
9
11
  <div class="design">
10
12
 
11
- <a href="#"><img src="portfolio_images/paspol.png"></a>
13
+ <a href="#"><img src="portfolio_images/paspol.png">
12
14
 
13
- <div class="mask">
15
+ <span class="mask">It's fresh!</span>
14
16
 
15
- <div class="caption">It's fresh!</div>
16
-
17
- </div>
17
+ </a>
18
18
 
19
19
  </div>
20
20
 
@@ -23,8 +23,6 @@
23
23
 
24
24
 
25
25
  ```CSS
26
-
27
- .designs{
28
26
 
29
27
  height: 434px;
30
28
 
@@ -42,6 +40,14 @@
42
40
 
43
41
 
44
42
 
43
+ .design a img{
44
+
45
+ width:100%;
46
+
47
+ }
48
+
49
+
50
+
45
51
  .design{
46
52
 
47
53
  width:300px;
@@ -50,53 +56,49 @@
50
56
 
51
57
  padding-bottom:34px;
52
58
 
59
+ position: relative;
60
+
53
61
  overflow: hidden;
54
-
55
- position: relative;
56
62
 
57
63
  }
58
64
 
59
65
 
60
66
 
61
- .design a img{
67
+ .mask{
62
68
 
63
- width:100%;
69
+ width: 300px;
64
70
 
65
- }
66
-
67
-
68
-
69
- .design.caption{
70
-
71
- font-size:16px;
72
-
73
- text-align: center;
74
-
75
- color: white;
76
-
77
- }
78
-
79
-
80
-
81
- .design.mask{
82
-
83
- width: 100%;
84
-
85
- height: 100%;
71
+ height: 200px;
86
72
 
87
73
  position: absolute;
88
74
 
89
75
  top: 0;
90
76
 
77
+ bottom: 0;
78
+
91
79
  left: 0;
80
+
81
+ right: 0;
82
+
83
+ background: rgba(0,0,0,0.5);
92
84
 
93
85
  opacity: 0;
94
86
 
95
- background-color: rgba(0,0,0,0.4);
87
+ color: #fff;
96
88
 
89
+ display: flex;
90
+
91
+ align-items: center;
92
+
97
- -webkit-transition: all 0.6s ease;
93
+ text-align: center;
94
+
95
+ padding: 30px;
96
+
97
+ opacity: 1;
98
98
 
99
99
  transition: all 0.6s ease;
100
+
101
+ padding-bottom: 0;
100
102
 
101
103
  }
102
104
 
@@ -104,10 +106,12 @@
104
106
 
105
107
  .design:hover.mask {
106
108
 
107
- opacity: 1;
108
-
109
- padding-top: 80px;
109
+ 　padding-bottom: 30px;
110
110
 
111
111
  }
112
112
 
113
+
114
+
115
+
116
+
113
117
  ```