hover時に画像をマスクして下から文字がスライドするCSS

今のままだと、下から文字がスライドしません
文字を下からスライドさせたいです

HTML
1
2      <div class="designs">
3
4        <div class="design">
5          <a href="#"><img src="portfolio_images/portfolio_top.png"></a>
6        <div class="design-text"><p><b>ポートフォリオ</b></p></div>
7        </div>

CSS
1.designs{
2  height: 434px;
3  width: 100%;
4  display: flex;
5  justify-content: space-between;
6  flex-wrap: wrap;
7  align-content: space-between;
8}
9
10.design a img{
11  width:100%;
12}
13
14.design{
15  width:300px;
16  height:200px;
17  padding-bottom:34px;
18  position: relative;
19  overflow: hidden;
20}
21
22.design-text{
23  width:300px;
24  height:200px;
25  position: absolute;
26  top: 0;
27  bottom: 0;
28  left: 0;
29  right: 0;
30  background: rgba(0,0,0,0.5);
31  opacity: 0;
32  color: #fff;
33  display: flex;
34  align-items: center;
35  text-align: center;
36}
37
38.design-text:hover{
39  opacity: 1;
40  transition: all 0.6s ease;
41}
42
43.design-text p{
44  padding-left: 20px;
45}

行動規範の内容に同意します

回答2件

自己解決

HTML
1    <div id="design">
2      <section class="section-wrapper">
3        <h2 class="section-title">design</h2>
4        <ul class="design-list">
5          <li class="design-item">
6            <a href="portfolio_pf.html" target="_blank">
7              <div class="design-list-img"><img src="./img/portfolio_top.png"></div>
8              <div class="design-list-text">
9                <p class="title">ポートフォリオサイト</p>
10                <p class="more">view more</p>
11              </div>
12            </a>
13          </li>
14・
15・
16・

CSS
1.design-list{
2  max-width: 1000px;
3  margin: 0 auto;
4  padding: 0 50px;
5  display: flex;
6  justify-content: space-between;
7  flex-wrap: wrap;
8}
9.design-item{
10  width: 32%;
11  position: relative;
12  overflow: hidden;
13  margin-bottom: 80px;
14}
15.design-item a{
16  color: #141414;
17  text-decoration: none;
18}
19.design-list-text{
20  position: absolute;
21  top: 0;
22  bottom: 0;
23  left: 0;
24  right: 0;
25  background: rgba(0,0,0,0.5);
26  opacity: 0;
27  color: #fff;
28  text-align: center;
29  display: flex;
30  flex-direction: column;
31  justify-content: center;
32}
33.design-list-text:hover{
34  opacity: 1;
35  transition: all 0.6s ease;
36}
37.title{
38  padding-bottom: 10px;
39  font-size: 1.4rem;
40}
41.more{
42  border: 1px #fff solid;
43  padding:5px;
44  font-size: 1.2rem;
45  width:100px;
46  height: 20px;
47  display: flex;
48  flex-direction: column;
49  justify-content: center;
50}
51.more:hover{
52  background-color: white;
53  color: rgba(0,0,0,0.5);
54  transition: all 0.3s;
55}
56.design-list-text p {
57  margin: 0 auto;
58}
59

投稿2020/08/28 02:45

編集2020/08/28 03:04

_arukuneko

総合スコア19

kei344

2020/08/28 02:47

【質問をした後に自己解決してしまった --- ヘルプ｜teratail（テラテイル）】 https://teratail.com/help#resolve-myself > 後から読む人のためにも、具体的な解決手順を記載してください。

行動規範の内容に同意します

貼られてあったコードを試しても何も動作しないのでゼロから自作してみました。
ホバーすると画像にマスクがかかり、文字が下から上にスライドします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <title>test</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
7  <meta charset="utf-8">
8  <style>
9    body {
10      margin: 0;
11    }
12
13    .mask {
14      width: 30vw;
15      height: 30vw;
16      position: absolute;
17      top: 0;
18      left: 0;
19      right: 0;
20      bottom: 0;
21      margin: auto;
22      background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809185139_6f53426b744a64775848.png);
23      background-repeat: no-repeat;
24      background-size: cover;
25      color: white;
26      font-size: 36px;
27      text-align: center;
28    }
29
30    .mask span {
31      position: absolute;
32      bottom: 0;
33      left: 0;
34      width: 100%;
35
36    }
37
38    .mask:hover {
39      background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809185139_78794d337176526e4b4a.png);
40    }
41
42    .mask:hover span {
43      animation: textRise 3s ease-in forwards;
44    }
45
46    @keyframes textRise {
47      0% {
48        transform: translateY(0);
49      }
50
51      100% {
52        transform: translateY(-26vw);
53      }
54    }
55  </style>
56</head>
57
58<body>
59  <div class="mask">
60    <span>マスクをつけましょう！</span>
61  </div>
62</body>
63
64</html>