块悬停后显示其他背景图像
Show other background image once block is hovered
我有 5 行是倾斜的。
悬停后,其中三个应显示带有 link 的非倾斜背景图像。
目前这个实现有几个问题:
1). 一旦鼠标光标位于文本块或 Font Awesome 图标上 - 背景图像就会隐藏起来。这是很自然的,因为文本块在可点击区域上方,但我还没有找到解决它的好方法。
2). 小问题 - 显示的背景图像和文本块的项目倾斜。它们应该是直的,没有应用转换。
工作示例is here
标记:
<div class="oblique-block">
<a href="#" title="Meet the creators" target="_self">
<div class="oblique first">
<span class="fa fa-users fa-inverse fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Meet <br /> us</span>
</div>
</a>
<a href="#" title="Cars that found homes" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-clock-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Lorem <br /> ipsum</span>
</div>
</a>
<a href="#" title="Check out the “a”list" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-heart-o" fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Check the <br /> lorem ipsum</span>
</div>
</a>
<a href="#" title="Dipsum" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-map-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">ipsum <br /> loremipsum</span>
</div>
</a>
<a href="#" title="Get in touch with us" target="_self">
<div class="oblique last">
<span class="fa fa-comment-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Get in touch <br /> with us</span>
</div>
</a>
</div>
CSS:
.oblique img {
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
z-index: 100;
}
.oblique img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
.oblique img:hover ~ .oblique{z-index:-100!important;display:none!important!;}
.oblique-block {
/*width: 100%;*/
height: 500px;
margin-left: 100px;
}
.oblique {
width: 20%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.oblique-block > a:nth-child(even) > div:nth-child(1) {
background: #E0AE51;
}
.oblique-block > a:nth-child(odd) > div:nth-child(1) {
background: #65C7CC;
}
.oblique.last {
background: #65C7CC;
}
.oblique.last:after {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -30%;
}
.oblique.first:before {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
.oblique .fa{
font-size: 40px;
font-style: normal;
color: #fff;
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.oblique .fa-text{
position: absolute;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
margin-top: 20px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
line-height: 33px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
}
.oblique.last .fa-text{z-index:5;}
布局:
上面是没有悬停效果的布局,下面是有悬停效果的布局
UPD: 通过 Oliver 的解决方案,我已经实现了目标。但还有一个问题:Font Awesome、文字和显示的图片歪斜了,而它们应该是直的。
UPD2 通过应用多重变换解决 transform: translate(-50%, -50%) skewx(10deg);
我想我已经做到了您所希望的。添加了以下 CSS ,所有注释均已注释,因此应说明用途。如果您还想要其他东西,请告诉我。
// Hide anything that extends beyond the oblique element
.oblique {
overflow: hidden;
}
// Move hover to the parent oblique so we capture all child elements (i.e. if they hover over the text)
.oblique:hover img {
// No changes here
opacity: 1.0;
filter: alpha(opacity=100);
// Add a transformation to correct for the transformation of the parent oblique
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
// Move the image a little to the left so that we don't get a gap from the transformation
margin-left: -10px;
}
演示
.oblique img {
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
z-index: 100;
}
.oblique {
overflow: hidden;
}
.oblique:hover img {
opacity: 1.0;
filter: alpha(opacity=100);
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
margin-left: -10px;
}
.oblique img:hover~.oblique {
z-index: -100!important;
display: none!important!;
}
.oblique-block {
/*width: 100%;*/
height: 500px;
margin-left: 100px;
}
.oblique {
width: 20%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.oblique-block>a:nth-child(even)>div:nth-child(1) {
background: #E0AE51;
}
.oblique-block>a:nth-child(odd)>div:nth-child(1) {
background: #65C7CC;
}
.oblique.last {
background: #65C7CC;
}
.oblique.last:after {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -30%;
}
.oblique.first:before {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
.oblique .fa {
font-size: 40px;
font-style: normal;
color: #fff;
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.oblique .fa-text {
position: absolute;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
margin-top: 20px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
line-height: 33px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
}
.oblique.last .fa-text {
z-index: 5;
}
<script src="https://use.fontawesome.com/1eff64076c.js"></script>
<div class="oblique-block">
<a href="#" title="Meet the creators" target="_self">
<div class="oblique first">
<span class="fa fa-users fa-inverse fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Meet <br /> us</span>
</div>
</a>
<a href="#" title="Cars that found homes" target="_self">
<div class="oblique">
<img src="https://placeimg.com/640/480/any" />
<span class="fa fa-clock-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Lorem <br /> ipsum</span>
</div>
</a>
<a href="#" title="Check out the “a”list" target="_self">
<div class="oblique">
<img src="https://placeimg.com/640/480/any" />
<span class="fa fa-heart-o fa-3 " aria-hidden="true "> </span>
<span class="fa-text text-uppercase ">Check the <br /> lorem ipsum</span>
</div>
</a>
<a href="# " title="Dipsum " target="_self ">
<div class="oblique ">
<img src="https://placeimg.com/640/480/any" />
<span class="fa fa-map-o fa-3 " aria-hidden="true "> </span>
<span class="fa-text text-uppercase ">ipsum <br /> loremipsum</span>
</div>
</a>
<a href="# " title="Get in touch with us " target="_self ">
<div class="oblique last ">
<span class="fa fa-comment-o fa-3 " aria-hidden="true "> </span>
<span class="fa-text text-uppercase ">Get in touch <br /> with us</span>
</div>
</a>
</div>
<img src="https://placeimg.com/640/480/any">
我有 5 行是倾斜的。
悬停后,其中三个应显示带有 link 的非倾斜背景图像。
目前这个实现有几个问题:
1). 一旦鼠标光标位于文本块或 Font Awesome 图标上 - 背景图像就会隐藏起来。这是很自然的,因为文本块在可点击区域上方,但我还没有找到解决它的好方法。
2). 小问题 - 显示的背景图像和文本块的项目倾斜。它们应该是直的,没有应用转换。
工作示例is here
标记:
<div class="oblique-block">
<a href="#" title="Meet the creators" target="_self">
<div class="oblique first">
<span class="fa fa-users fa-inverse fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Meet <br /> us</span>
</div>
</a>
<a href="#" title="Cars that found homes" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-clock-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Lorem <br /> ipsum</span>
</div>
</a>
<a href="#" title="Check out the “a”list" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-heart-o" fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Check the <br /> lorem ipsum</span>
</div>
</a>
<a href="#" title="Dipsum" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-map-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">ipsum <br /> loremipsum</span>
</div>
</a>
<a href="#" title="Get in touch with us" target="_self">
<div class="oblique last">
<span class="fa fa-comment-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Get in touch <br /> with us</span>
</div>
</a>
</div>
CSS:
.oblique img {
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
z-index: 100;
}
.oblique img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
.oblique img:hover ~ .oblique{z-index:-100!important;display:none!important!;}
.oblique-block {
/*width: 100%;*/
height: 500px;
margin-left: 100px;
}
.oblique {
width: 20%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.oblique-block > a:nth-child(even) > div:nth-child(1) {
background: #E0AE51;
}
.oblique-block > a:nth-child(odd) > div:nth-child(1) {
background: #65C7CC;
}
.oblique.last {
background: #65C7CC;
}
.oblique.last:after {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -30%;
}
.oblique.first:before {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
.oblique .fa{
font-size: 40px;
font-style: normal;
color: #fff;
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.oblique .fa-text{
position: absolute;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
margin-top: 20px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
line-height: 33px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
}
.oblique.last .fa-text{z-index:5;}
布局:
上面是没有悬停效果的布局,下面是有悬停效果的布局
UPD: 通过 Oliver 的解决方案,我已经实现了目标。但还有一个问题:Font Awesome、文字和显示的图片歪斜了,而它们应该是直的。
UPD2 通过应用多重变换解决 transform: translate(-50%, -50%) skewx(10deg);
我想我已经做到了您所希望的。添加了以下 CSS ,所有注释均已注释,因此应说明用途。如果您还想要其他东西,请告诉我。
// Hide anything that extends beyond the oblique element
.oblique {
overflow: hidden;
}
// Move hover to the parent oblique so we capture all child elements (i.e. if they hover over the text)
.oblique:hover img {
// No changes here
opacity: 1.0;
filter: alpha(opacity=100);
// Add a transformation to correct for the transformation of the parent oblique
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
// Move the image a little to the left so that we don't get a gap from the transformation
margin-left: -10px;
}
演示
.oblique img {
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
z-index: 100;
}
.oblique {
overflow: hidden;
}
.oblique:hover img {
opacity: 1.0;
filter: alpha(opacity=100);
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
margin-left: -10px;
}
.oblique img:hover~.oblique {
z-index: -100!important;
display: none!important!;
}
.oblique-block {
/*width: 100%;*/
height: 500px;
margin-left: 100px;
}
.oblique {
width: 20%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.oblique-block>a:nth-child(even)>div:nth-child(1) {
background: #E0AE51;
}
.oblique-block>a:nth-child(odd)>div:nth-child(1) {
background: #65C7CC;
}
.oblique.last {
background: #65C7CC;
}
.oblique.last:after {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -30%;
}
.oblique.first:before {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
.oblique .fa {
font-size: 40px;
font-style: normal;
color: #fff;
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.oblique .fa-text {
position: absolute;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
margin-top: 20px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
line-height: 33px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
}
.oblique.last .fa-text {
z-index: 5;
}
<script src="https://use.fontawesome.com/1eff64076c.js"></script>
<div class="oblique-block">
<a href="#" title="Meet the creators" target="_self">
<div class="oblique first">
<span class="fa fa-users fa-inverse fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Meet <br /> us</span>
</div>
</a>
<a href="#" title="Cars that found homes" target="_self">
<div class="oblique">
<img src="https://placeimg.com/640/480/any" />
<span class="fa fa-clock-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Lorem <br /> ipsum</span>
</div>
</a>
<a href="#" title="Check out the “a”list" target="_self">
<div class="oblique">
<img src="https://placeimg.com/640/480/any" />
<span class="fa fa-heart-o fa-3 " aria-hidden="true "> </span>
<span class="fa-text text-uppercase ">Check the <br /> lorem ipsum</span>
</div>
</a>
<a href="# " title="Dipsum " target="_self ">
<div class="oblique ">
<img src="https://placeimg.com/640/480/any" />
<span class="fa fa-map-o fa-3 " aria-hidden="true "> </span>
<span class="fa-text text-uppercase ">ipsum <br /> loremipsum</span>
</div>
</a>
<a href="# " title="Get in touch with us " target="_self ">
<div class="oblique last ">
<span class="fa fa-comment-o fa-3 " aria-hidden="true "> </span>
<span class="fa-text text-uppercase ">Get in touch <br /> with us</span>
</div>
</a>
</div>
<img src="https://placeimg.com/640/480/any">