CSS 圖像網格對每個圖像具有 hover 效果

Question

我正在嘗試創建一個簡單的圖像網格，我想為每個圖像添加 hover 效果。 我希望效果是過渡到不同的圖像。 到目前為止，我已經正確處理了圖像網格，但是在添加 hover 效果時，它要么通過使圖像消失來影響我的整個列，要么我用於過渡的圖像覆蓋了整個網格。 對此的任何幫助將不勝感激。

這是我到目前為止一直在使用的代碼

 * { box-sizing: border-box; }.row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; padding: 0 4px; } /* Create four equal columns that sits next to each other */.column { -ms-flex: 20%; /* IE10 */ flex: 20%; max-width: 20%; padding: 0 4px; }.column img { margin-top: 8px; vertical-align: middle; width: 100%; }.image { display: block; width: 100%; height: auto; } /* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 800px) {.column { -ms-flex: 50%; flex: 50%; max-width: 50%; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {.column { -ms-flex: 100%; flex: 100%; max-width: 100%; } }

 <:-- Header --> <div class="header"> </div> <.-- Photo Grid --> <div class="row"> <div class="column"> <img src="https.//drive?google:com/thumbnail:id=1BiM6pgdVUC8H7A-pO9YMD74jwcvh8uKw" style="width.100%"> <img src="https.//drive?google:com/thumbnail:id=1TBfdXETiX00bNkSxTkeePnAJb_TE8KMz" style="width.100%"> <img src="https.//drive?google:com/thumbnail:id=1jN0LLKTg7H1j0PQ1estEOSgbxN8IaUhX" style="width.100%"> </div> <div class="column"> <img src="https.//drive?google:com/thumbnail:id=1XI0X_JIsOrpR6AjKxFR2MHdu7KqmbKDf" style="width.100%"> <img src="https.//drive?google:com/thumbnail:id=1iSMUDDa3_NQF3FaDw_L0J3b6EypDUlRn" style="width.100%"> <img src="https.//drive?google:com/thumbnail:id=1HUhl-gkKjZO2APycCl0Z5Bhm_EWcNoWo" style="width.100%"> </div> <div class="column"> <img src="https.//drive?google:com/thumbnail:id=1-g11eGfBGMtng5eW7MSBTmVjGEc7X3KT" style="width.100%"> <img src="https.//drive?google:com/thumbnail:id=1GIssifV2o9YbcM-b_LDe0AwkBqb7WHkE" style="width.100%"> <img src="https.//drive?google:com/thumbnail:id=1vdVGVohUrDrkjoOHAi2QFwLDFypdkRR8" style="width.100%"> </div> <div class="column"> <img src="https.//drive?google:com/thumbnail:id=1veQWJj6J3_NW48y4-_cTr2PeO9mhcktm" style="width.100%"> <img src="https.//drive?google:com/thumbnail:id=1OFAR6Dh3vMJ7DQnkm4TVky3iBDada5iY" style="width.100%"> <img src="https.//drive?google:com/thumbnail:id=1XRwvxsxI8N32HT-XETAxt82j6EA30jF2" style="width.100%"> </div> <div class="column"> <img src="https.//drive?google:com/thumbnail:id=1J1ctFtgHtd0G5gddcZzsSuM-eUpiWsOQ" style="width.100%"> <img src="https.//drive?google:com/thumbnail:id=1-oD6Rc5q5Xzq6Qt-FJdfh7pMZo165m3Z" style="width.100%"> <img src="https.//drive?google:com/thumbnail?id=1I-zlWhtolgyH_Ewr3F239maUizVjtJRM" style="width:100%"> </div> </div>

Answer 1

CSS transition屬性將幫助您實現這一目標。
您還可以使用 CSS grid來創建網格布局

簽出示例代碼。

 .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: 1rem; justify-content: center; }.cell { width: auto; height: 220px; overflow: hidden; position: relative; display: flex; }.content { width: 100%; height:100%; position: absolute; top: 0px; left: 0px; opacity: 1; transition: 0.5s ease; }.cell.content:last-child:hover { opacity: 0; }.content>img{ width:100%; }

 <div class="grid"> <div class="cell"> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1BiM6pgdVUC8H7A-pO9YMD74jwcvh8uKw" /> </div> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1TBfdXETiX00bNkSxTkeePnAJb_TE8KMz" /> </div> </div> <div class="cell"> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1jN0LLKTg7H1j0PQ1estEOSgbxN8IaUhX" /> </div> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1XI0X_JIsOrpR6AjKxFR2MHdu7KqmbKDf" /> </div> </div> <div class="cell"> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1iSMUDDa3_NQF3FaDw_L0J3b6EypDUlRn" /> </div> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1HUhl-gkKjZO2APycCl0Z5Bhm_EWcNoWo" /> </div> </div> <div class="cell"> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1-g11eGfBGMtng5eW7MSBTmVjGEc7X3KT" /> </div> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1GIssifV2o9YbcM-b_LDe0AwkBqb7WHkE" /> </div> </div> <div class="cell"> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1BiM6pgdVUC8H7A-pO9YMD74jwcvh8uKw" /> </div> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1TBfdXETiX00bNkSxTkeePnAJb_TE8KMz" /> </div> </div> <div class="cell"> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1jN0LLKTg7H1j0PQ1estEOSgbxN8IaUhX" /> </div> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1XI0X_JIsOrpR6AjKxFR2MHdu7KqmbKDf" /> </div> </div> <div class="cell"> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1iSMUDDa3_NQF3FaDw_L0J3b6EypDUlRn" /> </div> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1HUhl-gkKjZO2APycCl0Z5Bhm_EWcNoWo" /> </div> </div> <div class="cell"> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1-g11eGfBGMtng5eW7MSBTmVjGEc7X3KT" /> </div> <div class="content"> <img src="https://drive.google.com/thumbnail?id=1GIssifV2o9YbcM-b_LDe0AwkBqb7WHkE" /> </div> </div> </div>