<div class="card hidden">
<h3 class="card-title">Card Title <span data-title="规则说明,规则说明,规则说明">规则</span></h3>
<div class="card-body">
<img class="cover" src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80">
</div>
</div>
<div class="card-wrapper">
<div class="card visible">
<h3 class="card-title">Card Title <span data-title="规则说明,规则说明,规则说明">规则</span></h3>
<div class="card-body">
<img class="clip" src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80">
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
padding: 2vw;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2vw;
place-items: center;
}
.card {
border: 1px solid #eee;
box-shadow: 0 0 1px rgba(0,0,0,.45);
width: 100%;
min-height: 20vw;
border-radius: 4px;
overflow: hidden;
padding: 5px;
&.hidden {
position: relative;
}
img {
max-width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
}
.card-wrapper {
position: relative;
width: 100%;
}
.card-title {
border-bottom: 1px dotted;
padding: 10px 2vw;
margin-bottom: 10px;
display: flex;
align-items: center;
span {
margin-left: auto;
display: inline-flex;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 12px;
color: #fff;
background: #000;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
right: .5vw;
&::before,
&::after {
content: '';
position: absolute;
opacity: 0;
transition: opacity .28s ease;
}
&::before {
content: attr(data-title);
white-space: nowrap;
padding: 5px;
background: #f36;
border-radius: 4px;
left: 50%;
transform: translate(-50%, 0);
bottom: calc(100% + 8px);
}
&::after {
width: 8px;
height: 8px;
background: #f36;
left: 50%;
bottom: calc(100% + 4px);
transform: translate(-50%, 0) rotate(45deg);
}
&:hover::before,
&:hover::after {
opacity: 1;
transition: opacity .28s ease;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.