Create a gist now

Instantly share code, notes, and snippets.

CSS Faux Image Frames (with text overlay)
<!-- The container can be anything, I just used <div> for the sake of getting this up there. -->
<!-- Let's add an overlay with some text! -->
<div class="framed with-overlay">
<img src="path/to/image.jpg" />
<div class="overlay">An overlay</div>
</div>
<!-- Or, just have the frame itself -->
<div class="framed">
<img src="path/to/image.jpg" />
</div>
/* Just some styling to demonstrate the border's transparency. */
div {
height: 300px;
width: 300px;
background-color: #000;
}
.framed {
position: relative;
}
.framed:after {
border: 20px solid rgba(255, 255, 255, 0.7);
bottom: 0;
content: " ";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 100;
pointer-events: none;
}
/* Let the overlay handle the bottom "border" */
.framed.with-overlay:after {
border-bottom: 0 none;
}
.overlay {
background-attachment: scroll;
background-clip: border-box;
background: rgba(255, 255, 255, 0.7);
background-origin: content-box;
bottom: 0;
left: 0;
margin: 0 20px;
position: absolute;
right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment