5
我目前有一個瓷磚，我懸停最初是模糊的。圖像縮小後，這種模糊狀態會穩定下來，並在拼貼上產生不希望的效果。請查看我粘貼的代碼。它應該給你一個關於我在說什麼的公平想法。我如何擺脫'解決模糊'CSS效果
我試圖搞亂CSS後和圖像被徘徊但沒有改變任何東西。
.tiles {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
postiion: relative;
margin: -2.5em 0 0 -2.5em;
}
.tiles article {
-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
transition: transform 0.5s ease, opacity 0.5s ease;
position: relative;
width: calc(33.33333% - 2.5em);
margin: 2.5em 0 0 2.5em;
}
.tiles article > .image {
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
position: relative;
display: block;
width: 100%;
border-radius: 4px;
overflow: hidden;
}
.tiles article > .image img {
display: block;
width: 100%;
}
.tiles article > .image:before {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
-moz-transition: background-color 0.5s ease, opacity 0.5s ease;
-webkit-transition: background-color 0.5s ease, opacity 0.5s ease;
-ms-transition: background-color 0.5s ease, opacity 0.5s ease;
transition: background-color 0.5s ease, opacity 0.5s ease;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 1;
opacity: 0.8;
}
.tiles article > .image:after {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.25;
z-index: 2;
}
.tiles article > a {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease;
-webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease;
-ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease;
transition: background-color 0.5s ease, transform 0.5s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1em;
border-radius: 4px;
border-bottom: 0;
color: #ffffff;
text-align: center;
text-decoration: none;
z-index: 3;
}
.tiles article > a > :last-child {
margin: 0;
}
.tiles article > a:hover {
color: #ffffff !important;
}
.tiles article > a h2 {
margin: 0;
}
.tiles article > a .content {
-moz-transition: max-height 0.5s ease, opacity 0.5s ease;
-webkit-transition: max-height 0.5s ease, opacity 0.5s ease;
-ms-transition: max-height 0.5s ease, opacity 0.5s ease;
transition: max-height 0.5s ease, opacity 0.5s ease;
width: 100%;
max-height: 0;
line-height: 1.5;
margin-top: 0.35em;
opacity: 0;
}
.tiles article > a .content > :last-child {
margin-bottom: 0;
}
body:not(.is-touch) .tiles article:hover > .image {
-webkit-filter: blur(5px);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
body:not(.is-touch) .tiles article:hover > .image:before {
background-color: #333333;
opacity: 0.35;
}
body:not(.is-touch) .tiles article:hover > .image:after {
opacity: 0;
}
body:not(.is-touch) .tiles article:hover .content {
max-height: 15em;
opacity: 1;
}
* + .tiles {
margin-top: 2em;
}
body.is-loading .tiles article {
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.8;
}
body.is-touch .tiles article .content {
max-height: 15em;
opacity: 1;
}
@media screen and (max-width: 1280px) {
.tiles {
margin: -1.25em 0 0 -1.25em;
}
.tiles article {
width: calc(33.33333% - 1.25em);
margin: 1.25em 0 0 1.25em;
}
}
@media screen and (max-width: 980px) {
.tiles {
margin: -2.5em 0 0 -2.5em;
}
.tiles article {
width: calc(50% - 2.5em);
margin: 2.5em 0 0 2.5em;
}
}
@media screen and (max-width: 736px) {
.tiles {
margin: -1.25em 0 0 -1.25em;
}
.tiles article {
width: calc(50% - 1.25em);
margin: 1.25em 0 0 1.25em;
}
.tiles article:hover > .image {
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
}
}
@media screen and (max-width: 480px) {
.tiles {
margin: 0;
}
.tiles article {
width: 100%;
margin: 1.25em 0 0 0;
}
}<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<section class="tiles">
\t <article>
\t <span class="image">
\t <img src="http://cdn.iwillteachyoutoberich.com/wp-content/uploads/2008/11/generic-candy.jpg" />
\t </span>
\t <a href="#zaplan" class="portfolio-link" data-toggle="modal" target="_blank">
\t <h2>IrackBot</h2>
\t <div class="content">
\t <p>Featured on the official Slack website, IrackBot is built for for Efficient and Manageable Open Source communication across Slack and IRC
\t </p>
\t <h3>
\t <i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i>
\t </h3>
\t </div>
\t </a>
</article>
</section>
</body>你注意到的細微unblurring /穩定圖像上下它是在徘徊和放大後？我希望擺脫這一點，並保持模糊。
我看到人提供在過渡期結束脩整溢出。解決方案可能在於此。 – isherwood
就這麼你知道，這是Chrome的一個bug。它不會發生在Firefox上。只需添加'filter：blur（5px）;'和'-webkit-filter：'，並且模糊也可以使用FF35 + – pol