- オーバーレイが下の画像よりも僅かに大きいです。これは、異なる画像が使用されている場合でも存続します。
問題は画像そのものにあり、それはコンテナよりも小さいです。 background-colorをコンテナに配置しようとすると、オーバーレイの高さがその親と同じであることがわかります。
- 遷移は機能しません。ホバー効果が表示され、突然隠されます。
あなたはCSS displayの移行を実装することができない、他の代替はopacityを使用することでしょう。あなたのコードを修正しました。試してみてください。
html {
\t box-sizing:border-box;
}
*, *:before, *:after {
\t box-sizing:inherit;
}
body {
\t background-color:honeydew;
\t font-size: 16px;
\t line-height: 120%;
\t color: #333;
\t margin: 0;
\t padding: 0;
}
.wrapper {
\t min-height: 100vh;
\t width: 80vw;
\t max-width:1200px;
\t margin: auto;
\t border: 0;
\t padding: 0;
\t column-count: 3;
\t column-gap: 20px;
}
.item {
\t display:block;
\t margin: 0 0 20px;
\t border:0;
\t width:100%;
\t position:relative;
background-color: black;
}
.item-overlay {
\t position:absolute;
\t top:0;
\t left:0;
\t bottom:0;
\t width:100%;
\t background-color: rgba(51,51,51,0.6);
\t color:white;
\t opacity:0;
\t transition:300ms ease opacity;
display: flex;
\t flex-direction:column;
\t justify-content:center;
\t align-items:center;
}
.item:hover .item-overlay {
\t opacity: 1;
\t background-color: rgba(51,51,51,0.6);
}
.project-img {
\t width:100%;
\t margin:0;
\t border:0;
\t padding:0;
}
.project-name {
\t font-weight:bold;
}
.project-category {
\t font-size:0.75em;
\t text-transform:uppercase;
<body>
\t <div class="wrapper">
\t \t <div class="item">
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
\t \t \t <div class="item-overlay">
\t \t \t \t <p class="project-name">Project Name</p>
\t \t \t \t <p class="project-category">Commercial</p>
\t \t \t </div>
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
\t \t \t <div class="item-overlay">
\t \t \t \t <p class="project-name">Project Name</p>
\t \t \t \t <p class="project-category">Commercial</p>
\t \t \t </div>
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
\t \t \t <div class="item-overlay">
\t \t \t \t <p class="project-name">Project Name</p>
\t \t \t \t <p class="project-category">Commercial</p>
\t \t \t </div>
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
\t \t \t <div class="item-overlay">
\t \t \t \t <p class="project-name">Project Name</p>
\t \t \t \t <p class="project-category">Commercial</p>
\t \t \t </div>
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
\t \t \t <div class="item-overlay">
\t \t \t \t <p class="project-name">Project Name</p>
\t \t \t \t <p class="project-category">Commercial</p>
\t \t \t </div>
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
\t \t \t <div class="item-overlay">
\t \t \t \t <p class="project-name">Project Name</p>
\t \t \t \t <p class="project-category">Commercial</p>
\t \t \t </div>
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
\t \t \t <div class="item-overlay">
\t \t \t \t <p class="project-name">Project Name</p>
\t \t \t \t <p class="project-category">Commercial</p>
\t \t \t </div>
\t \t </div>
\t </div>
</body>
出典
2017-04-21 04:21:00
nvl
ありがとう！ 'vertical-align：top'で修正しました。しかし、なぜ元のコードはそれなしで動作しませんでしたか？ –
イメージはインラインコンテンツとして扱われ、インラインコンテンツの一番下には文字の小さな軌跡（p、j、qなど）のためのスペースがあります。 'vertical-align：top'または' display：block'はそのスペースを削除します。 @NatTan –