我已经在图像上使用自定义CSS实现了此设计。我必须显示四类细节。我已经实现了编程,但是在垂直对齐它们时遇到了问题。
我未对图片应用任何显示,但是在询问时布局会暂停,并且当我将图像不透明度设置为0%时,图像仍然存在。
.main-box{
padding: 1rem;
display: inline-block;
width: 100%;
min-width: 130px;
max-width: 130px;
display: inline-block;
border: 1px solid #000;
height: 150px;
max-height: 150px;
}
.main-box img{
width: 30%;
border-radius:50%;
display:block;
margin:auto;
}
.main-box p,a{
text-align: center;
}
.main-box a{
display: block;
}
.show{
opacity: 0;
}
.main-box:hover img{
opacity: 0;
}
.main-box:hover .show{
opacity: 1;
}
.main-box:hover {
background:url(https://ui-avatars.com/api/?background=0D8ABC&color=fff);
background-size: cover;
background-repeat: no-repeat;
}
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
我思考我了解您的要求-尝试将.show
CSS更改为display: none
。
opacity
属性仅会更改多少元素在呈现时的可见性-但其在页面上的“足迹”将保留。
如果改为使用display: none;
CSS,则将忽略DOM中元素的“足迹”。
见下文:
.show {
display: none;
}
您还希望在<div>
元素周围包含包装器.main-box
,以便您可以设置框集合的行为。我刚刚添加了具有以下CSS行为的<div class="main">
:
.main {
display: flex;
flex-flow: wrap;
}
对于网格情况,您将受益于采用基于Flexbox的方法-有关更多信息,请参见W3Schools page-祝您好运!
.main {
display: flex;
flex-flow: wrap;
}
.main-box {
margin: .5rem .5rem;
padding: 1rem;
display: inline-block;
width: 100%;
min-width: 130px;
max-width: 130px;
display: inline-block;
border: 1px solid #000;
height: 150px;
max-height: 150px;
}
.main-box img {
width: 30%;
border-radius: 50%;
display: block;
margin: auto;
}
.main-box p,
a {
text-align: center;
}
.main-box a {
display: block;
}
.show {
opacity: 0;
}
.main-box:hover img {
opacity: 0;
display: none;
}
.main-box:hover .show {
opacity: 1;
}
.main-box:hover {
background: url(https://ui-avatars.com/api/?background=0D8ABC&color=fff);
background-size: cover;
background-repeat: no-repeat;
}
<div class="main">
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
<div class="main-box">
<img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
<div class="show-info">
<p>name</p>
<p>batch</p>
</div>
<div class="show">
<p>join</p>
<a href="#">profile</a>
</div>
</div>
</div>