CSS 每张图片都有悬停效果的图片网格
CSS Image Grid with hover effect to each image
我正在尝试创建一个简单的图像网格,我想为每个图像添加悬停效果。我希望效果是过渡到不同的图像。到目前为止,我已经正确处理了图像网格,但是当涉及到添加悬停效果时,它要么通过使图像消失来影响我的整个列,要么我用于过渡的图像覆盖整个网格。如有任何帮助,我们将不胜感激。
这是我目前使用的代码
* {
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>
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>
我正在尝试创建一个简单的图像网格,我想为每个图像添加悬停效果。我希望效果是过渡到不同的图像。到目前为止,我已经正确处理了图像网格,但是当涉及到添加悬停效果时,它要么通过使图像消失来影响我的整个列,要么我用于过渡的图像覆盖整个网格。如有任何帮助,我们将不胜感激。
这是我目前使用的代码
* {
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>
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>