Blur filter

Trimming the blurred edges off an image using a container and absolute positioning.

by adamh

HTML

<div>
    <img src="http://media.audleytravel.com/-/media/Images/Home/Destinations/Continents/Asia/China/Letterbox/theterracottawarriors205421.ashx?w=300" alt="Warriors" />
    <span>Terracotta</span>
</div>

CSS

div {
    display: inline-block;
    width: 292px;
    height: 125px;
    overflow: hidden;
    position: relative;
}

img {
    position: absolute;
    top: -4px;
    left: -4px;
    -webkit-filter: blur(2px);
}

span {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: "Helvetica Neue", Arial;
    font-weight: bold;
    font-size: 32px;
    color: white;
    text-shadow: 2px 2px 0 rgba(48,48,48,0.5);
}