Created
November 7, 2012 18:18
-
-
Save ShaunaGordon/4033366 to your computer and use it in GitHub Desktop.
CSS Faux Image Frames (with text overlay)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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