css imgが表示されない

Question

初めまして、今転職を考えておりポートフォリオサイトを作っているのですが今まで反映されていた画像とmaskをつかってhoverしたら真ん中の画像のようにみえるようなものを作っていたのですがimgの範囲が指定しても小さいままでどこが間違っているか教えて頂けると本当に助かります。
ご回答よろしくお願いします。

html//

<div class="portfolio"> <a href="#"> <img src="images/ポートフォリオ３.png" alt="ポートフォリオ2作品目です"> <div class="mask1"></div> <div class="mask2"></div> <div class="caption">

        <p> 
          【Category】オリジナル作品
          <br>
          <br>
          【Title】ブログ型サイト
          <br>
          <br>
          【Skill】HTML,CSS,JQuery
          <br>
          <br>
          【Detail】ブログサイトにて「情報発信」や「集客」が可能です。
        
        </p>
      </div>
    </div>
  </a>

css

.portfolio_section {
margin: 0 auto;
padding: 30px 0 60px 0;
}

.portfolio {
height: 200px;
overflow: hidden;
display: inline-block;
position: relative;
background-color: pink;
text-align: center;
margin:0 auto;
}
.portfolio .caption {
width: 100%;
height: 100%;
visibility: hidden; /* 文字を表示しない /
font-size: 150%;
position: absolute;
top: 50px;
left: 0;
text-align: center;
-webkit-transition: all 0.4s step-end;
transition: all 0.4s step-end;
}
.portfolio:hover .caption {
visibility: visible; / 文字を表示する /
}
.portfolio .caption p {
color: #fff;
opacity: 0; / ホバーが解除された時すぐ消えるように、文字を表示しない /
}
.portfolio:hover .caption p {
opacity: 1; / 文字を表示する /
}
.portfolio .mask1, .portfolio .mask2 {
width: 50%; / 幅は半部のサイズ /
height: 100%;
position: absolute;
top: 0;
background-color: rgba(0,0,0,0.4);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.portfolio .mask1 {
left: -50%; / 枠の左に置いて表示させない /
}
.portfolio:hover .mask1 {
left: 0px; / 左にずらして表示する /
}
.portfolio .mask2 {
right: -50%; / 枠の右に置いて表示させない /
}
.portfolio:hover .mask2 {
right: 0px; / 右にずらして表示する */
}

.portfolio img {
width: 100%;
height:auto;
}

長くなりましたがこちらが書いたコードになります
独学で見ながらやっていて全然わからない自分に助けて頂けると嬉しいです。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

>imgの範囲が指定しても小さいままで
文章説明より図示してもらったほうがいいかもしれません。

Answer 1

こういうことですか？

.portfolio {
  width: 100%;
  height: 100vh;
}

heightは要るのか要らないのかわかりませんが。

Comments

[退会済みユーザー]

ありがとうございました！