Created
May 8, 2012 16:01
-
-
Save pixleight/2636665 to your computer and use it in GitHub Desktop.
Image titles
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
/** | |
* Image titles | |
*/ | |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); | |
html{ | |
background: #EFE; | |
background: linear-gradient(45deg, #EFE, EEF); | |
min-height: 100%; | |
font-family: "Open Sans", sans-serif; | |
font-weight: 300; | |
} | |
#wrapper { | |
width: 90%; | |
min-width: 800px; | |
max-width: 1500px; | |
margin: 20px auto; | |
} | |
a { | |
position: relative; | |
z-index: 1; | |
display: block; | |
} | |
a:before { | |
display: block; | |
height: 0; | |
content: attr(title); | |
padding: 10px; | |
} | |
a:hover:before { | |
height: auto; | |
display:block; | |
position: absolute; | |
z-index: 2; | |
width: 100%; | |
padding: 10px; | |
color: #FFF; | |
background: rgba(0, 0, 0, 0.5); | |
} |
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
<div id="wrapper"> | |
<h1>Hello World</h1> | |
<p>Lorem ipsum dolor sit amet</p> | |
<a title="Kitten!"><img src="http://placekitten.com/400/300" alt="Kitten!" title="Here is a fuzzy kitten for your enjoyment"></a> | |
</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
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment