我见过this thread但它对我不起作用。 (除非我在错误的地方粘贴建议的代码)
基本上,在Firefox中,当悬停一个链接时,图像移位1px(只有一些,所以请玩它来捕捉它)。除此之外,Chrome还会模糊所有图像。
删除时
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
问题消失了。
有没有办法让它工作而不会失去那条线?
完整代码:
HTML
<div class="main">
<div class="hover_img animated fadeInUp">
<a class="hover_link" href="work/sensory/">Sensory Possibilities<span>
<img src="http://witch-house.com/NEW/sensory.png"/></span></a>
/
<a class="hover_link" href="work/designing/">Designing Humans<span>
<img src="http://witch-house.com/NEW/deshum.png"/></span></a>
/
<a class="hover_link" href="work/daggerforest/">Dagger Forest<span>
<img src="http://witch-house.com/NEW/dagger.jpg"/></span></a>
/
<a class="hover_link" href="work/wavelength/">Wavelength<span>
<img src="http://witch-house.com/NEW/dagger.jpg" class="img4"></span></a>
/
<a class="hover_link" href="work/talescrypt/">Tales From The Crypt<span>
<img src="http://witch-house.com/NEW/tftc.jpg"/></span></a>
/
<a class="hover_link" href="work/dnahackers/">DNA Hackers<span>
<img src="http://witch-house.com/NEW/dnahx.jpg"/></span></a>
/
<a class="hover_link" href="work/robots/" >Do Graphic Designers Need To Be Human?<span>
<img src="http://witch-house.com/NEW/robots.jpg"/></span></a>
</div>
</div>
</div>
和CSS:
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54%;
font-size: 2.5vw;
line-height: 2.8vw;
font-family: 'Raleway';
text-transform: uppercase;
font-weight:200;
margin: 0 auto;
}
.hover_link {
color: #d2d2d2;
font-family: 'Rubik';
text-transform: uppercase;
font-weight:900;
}
.hover_link:hover {
text-decoration: none;
color: #4b2de5;
}
/* PROJECTS IMAGES */
.hover_img span {
pointer-events: none;
z-index:-1;
opacity: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
.hover_img a:hover span {
display: inline-block;
opacity: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a { text-decoration:none; }
img { width: 40vw; }
答案 0 :(得分:0)
尝试使用此CSS
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54%;
font-size: 2.5vw;
line-height: 2.8vw;
font-family: 'Raleway';
text-transform: uppercase;
font-weight:200;
margin: 0 auto;
}
.hover_link {
color: #d2d2d2;
font-family: 'Rubik';
text-transform: uppercase;
font-weight:900;
}
.hover_link:hover {
text-decoration: none;
color: #4b2de5;
}
/* PROJECTS IMAGES */
.hover_img span {
z-index: -1;
opacity: 0;
display: inline-block;
transition: opacity .3s ease-in-out;
position: fixed;
width: 100%;
text-align: center;
top: -50%;
left: 0;
}
.hover_img a:hover span {
opacity: 1;
}
a { text-decoration:none; }
img { width: 60%; margin: 0 auto;}
答案 1 :(得分:0)
并改变我们以这种方式在html中插入图像的方式
<div class="main">
<div class="hover_img animated fadeInUp">
<a class="hover_link" href="work/sensory/">Sensory Possibilities
<span style="background-image: url(http://witch-house.com/NEW/sensory.png)" />
</span></a>
/
<a class="hover_link" href="work/designing/">Designing Humans
<span style="background-image: url(http://witch-house.com/NEW/deshum.png)" />
</span></a>
/
<a class="hover_link" href="work/daggerforest/">Dagger Forest
<span style="background-image: url(http://witch-house.com/NEW/dagger.jpg)" />
</span></a>
/
<a class="hover_link" href="work/wavelength/">Wavelength
<span style="background-image: url(http://witch-house.com/NEW/dagger.jpg)" />
</span></a>
/
<a class="hover_link" href="work/talescrypt/">Tales From The Crypt
<span style="background-image: url(http://witch-house.com/NEW/tftc.jpg)" />
</span></a>
/
<a class="hover_link" href="work/dnahackers/">DNA Hackers
<span style="background-image: url(http://witch-house.com/NEW/dnahx.jpg)"/>
</span></a>
/
<a class="hover_link" href="work/robots/" >Do Graphic Designers Need To Be Human?
<span style="background-image: url(http://witch-house.com/NEW/robots.jpg)"/>
</span></a>
</div>
</div>
</div>
和CSS
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54%;
font-size: 2.5vw;
line-height: 2.8vw;
font-family: 'Raleway';
text-transform: uppercase;
font-weight:200;
margin: 0 auto;
}
.hover_link {
color: #d2d2d2;
font-family: 'Rubik';
text-transform: uppercase;
font-weight:900;
}
.hover_link:hover {
text-decoration: none;
color: #4b2de5;
}
/* PROJECTS IMAGES */
.hover_img span {
z-index: -1;
opacity: 0;
display: inline-block;
transition: opacity .3s ease-in-out;
position: fixed;
width: 100%;
text-align: center;
left: 0;
top: -50%;
height: 200%;
background-position: center;
background-size: auto 100%;
background-repeat: no-repeat;
}
.hover_img a:hover span {
opacity: 1;
}
a { text-decoration:none; }
img { width: 60%; margin: 0 auto;}