62224


animationで説明文章の背景画像だけ大きくしたいですが、できません  
説明にだけ1.1の逆数を掛けましたがこれでもうまく動きません

簡単にできると思ったんですが、できず、助けてください(T_T)  
できればJavascriptは使わずに済ませたいです

[code]

    .container-panel {
      width: 500px;
      height: 500px;
      overflow: hidden;
    }
    
    .panel-desc {
      background: url(background_hero.jpg);
      background-size: cover;
      width: 100%;
      height: 100%;
      animation: zoom 3s;
    }
    
    .desc {
      animation: nozoom;
    }
    
    @keyframes zoom {
      100% {
        transform: scale(1.1, 1.1)
      }
    }
    
    @keyframes nozoom {
      100% {
        transform: scale(0.9, 0.9);
      }
    }
[/code]

[code]

    <div class="container-panel">
      <div class="panel-desc">
        <div class="desc">画像の説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</div>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2020-01-14T04:28:31.303
62222
2020-01-14T05:25:28.963
2020-01-14T04:32:42.867
2238
37046
question
javascript html css
画像だけ拡大したいですが文字まで拡大する


こんな感じですか？

[code]

    .container-panel {
      width: 500px;
      height: 500px;
      overflow: hidden;
    }
    
    .panel-desc {
      background: url(https://cdn.sstatic.net/Sites/ja/Img/sprites.svg?v=d62ac906bcbf);
      background-size: cover;
      width: 100%;
      height: 100%;
      animation: zoom 3s;
    }
    
    .desc {
      animation: nozoom;
      position:absolute;
      z-index:1;
    }
    
    @keyframes zoom {
      100% {
        transform: scale(1.1, 1.1)
      }
    }
    
    @keyframes nozoom {
      100% {
        transform: scale(0.9, 0.9);
      }
    }
[/code]

[code]

    <div class="container-panel">
        <div class="desc">画像の説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</div>
      <div class="panel-desc">
      </div>
    </div>
[/code]


CC BY-SA 4.0
2020-01-14T05:25:28.963
62224
2020-01-14T05:25:28.963
6040
62222
answer