0
字母跳當.cell
規模。如何更好地平滑這種懸停效果?
如何實現文本的平滑懸停效果?如果您使用包含文本的元素有關的背面能見度
html,
body,
.wrap {
height: 100%;
}
body {
background: #fff4fa;
}
.wrap {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-flow: row wrap;
max-width: 33rem;
width: 100%;
margin: 0rem auto;
}
.cell__text {
position: relative;
z-index: 100;
color: #ffffff;
text-decoration: none;
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
text-align: center;
font-size: .75rem;
}
.box:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(17,17,17,.47);
}
.box {
width: 10rem;
height: 20rem;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
position: relative;
}
.cell {
width: 10rem;
height: 20rem;
transform: rotate(120deg);
overflow: hidden;
position: relative;
margin: -10.5rem .5rem 0;
transition: all .27s ease-in-out;
will-change: transform;
}
.box-xx {
transform: rotate(-60deg);
height: 100%;
width: 100%;
overflow: hidden;
}
.box-x {
transform: rotate(-60deg);
height: 100%;
width: 100%;
background-size: cover;
position: relative;
transition: all .27s ease-in-out;
}
.cell:hover { z-index: 100; transform: rotate(120deg) scale(1.2); }
.box-1 {
background: url(https://images.unsplash.com/photo-1472211093208-3b31a17f3b12?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=252&q=80&cs=tinysrgb) center no-repeat;
}
.box-2 {
background: url("https://images.unsplash.com/photo-1472141341085-dab5ea0df9a2?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=250&q=80&cs=tinysrgb") center no-repeat;
}
.box-3 {
background: url("https://images.unsplash.com/photo-1468679950062-7f9630082231?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=251&q=80&cs=tinysrgb") center no-repeat;
}
.box-4 {
background: url("https://images.unsplash.com/photo-1468218620578-e8d78dcda7b1?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=251&q=80&cs=tinysrgb") center no-repeat;
}
.box-5 {
background: url("https://images.unsplash.com/photo-1460400355256-e87506dcec4f?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=251&q=80&cs=tinysrgb") center no-repeat;
}
<div class="wrap">
<div class="cell">
<div class="box-xx">
<div class="box-x box-1">
<div class="box">
<a href="#" class="cell__text">Lorem ipsum dolor.</a>
</div>
</div>
</div>
</div>
<div class="cell">
<div class="box-xx">
<div class="box-x box-2">
<div class="box">
<a href="#" class="cell__text">Lorem ipsum dolor.</a>
</div>
</div>
</div>
</div>
<div class="cell">
<div class="box-xx">
<div class="box-x box-3">
<div class="box">
<a href="#" class="cell__text">Lorem ipsum dolor.</a>
</div>
</div>
</div>
</div>
<div class="cell">
<div class="box-xx">
<div class="box-x box-4">
<div class="box">
<a href="#" class="cell__text">Lorem ipsum dolor.</a>
</div>
</div>
</div>
</div>
<div class="cell">
<div class="box-xx">
<div class="box-x box-5">
<div class="box">
<a href="#" class="cell__text">Lorem ipsum dolor.</a>
</div>
</div>
</div>
</div>
</div>
我會關心你的命中盒位置。每個單元格都與其他單元格重疊,並且您並不總是獲得您想要放大的單元格。 – hungerstar
現在問題懸停和我的文字 – Elena
都似乎規模統一..不知道你在這裏面臨的問題 – kukkuz