Blurry font after applying transform
scale
was the biggest culprit here. Scaling up over 1 causes blur, so rather than scaling up when hovered, I had the element scale down and up to 1 when hovered.
Additionally, removing perspective
from transformation yielded crisp text and images.
Element transforms to half-pixel and text is now blurry
Well after some more digging, I decided using flexbox would be the easiest way to achieve this vertical centering without blurry text (As suggested by Vestride). Fortunately it doesn't seem to cause any complications with the Bootstrap carousel when applied as such:
div.carousel-caption{
position: static;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
It seems like it should work for most browsers according to this. IE might suffer a little. But it worked fine for my IE 11.
CSS transform animation causes visual glitch in subsequent blurred elements (Chrome only)
If you use transform: translateY(20px)
instead of margin-top: 20px
the bug will be fixed.
button {
width: 400px;
height: 60px;
transition: transform 500ms;
}
button:hover {
transform: translateY(-4px);
}
.container {
transform: translateY(20px);
overflow: hidden; /* remove overflow: hidden to see blur */
height: 200px;
width: 400px;
}
.blurred {
height: 100%;
width: 100%;
overflow: hidden;
background: black;
filter: blur(10px);
transform: scale(1.2);
}
<button>Hover me</button>
<div class="container">
<div class="blurred" />
</div>
Related Topics
Are There a CSS Property That Would Change Nothing and Where We Can Store Information
Elements with Animation Delay Briefly Appear Before Fading in Using Purely CSS3 Keyframes (No Js)
Vue.Js + Webpack Multiple Style Tas Output
Next-Sibling Combinator Should Not Work with Complex Selectors
How to Select My CSS Module Class Using Document.Queryselector
Javafx Style All Nodes of The Same Type, E.G., Vbox
Bootstrap Container Fill Sides with Colors
Select: Last-Child with Especific Class Name (With Only CSS)
Styling Polymer Element in Angular2
CSS Flexbox: a Centered Child Overflows a Parent with Position Fixed
How to Align Two Columns of Text in CSS
Complex Selector Don't Work in Last Blink Version: Nth-Child(2):Nth-Last-Child(2){}