A CSS challenge to make avatars that fit into the white space of a big X
Forked from Torunn Skrogstad's Pen Diamond avatars.
A Pen by Anonasaurus Rex on CodePen.
A CSS challenge to make avatars that fit into the white space of a big X
Forked from Torunn Skrogstad's Pen Diamond avatars.
A Pen by Anonasaurus Rex on CodePen.
<ul class="speakers-list"> | |
<li> | |
<div class="avatar"><a href="#"><img src="http://www.tedxliverpool.com/img//speakers/sir-ken-robinson.jpg"></a></div> | |
<h3><a href="#">Sir Ken Robinson | |
<span>TED Icon</span> | |
</a> | |
</h3> | |
</li> | |
<li> | |
<div class="avatar"><a href="#"><img src="http://www.tedxliverpool.com/img//speakers/graham-hughes.jpg"></a></div> | |
<h3><a href="/speakers/graham-hughes">Graham Hughes | |
<span>The Odyssey Expedition</span> | |
</a> | |
</h3> | |
</li> | |
<li> | |
<div class="avatar"><a href="#"><img src="http://www.tedxliverpool.com//img//speakers/mike-southon.jpg"></a></div> | |
<h3><a href="#">Mike Southon | |
<span>The Beermat Entrepreneur</span> | |
</a> | |
</h3> | |
</li> | |
</ul> |
a { | |
color: #e62b1e; | |
border-bottom: 1px solid #e62b1e; | |
text-decoration: none; | |
} | |
a:hover { | |
color: #a31b04; | |
border-color: #a31b04; | |
outline: none; | |
-webkit-transition: all 1s ease-out; | |
-moz-transition: all 1s ease-out; | |
-ms-transition: all 1s ease-out; | |
-o-transition: all 1s ease-out; | |
transition: all 1s ease-out; | |
} | |
a:focus, a:active { | |
color: #821603; | |
border-color: #821603; | |
outline: none; | |
-webkit-transition: all 1s ease-out; | |
-moz-transition: all 1s ease-out; | |
-ms-transition: all 1s ease-out; | |
-o-transition: all 1s ease-out; | |
transition: all 1s ease-out; | |
} | |
a:focus:hover, a:active:hover { | |
color: #681202; | |
border-color: #681202; | |
} | |
.speakers-list { | |
max-width: 1000px; | |
text-align: center; | |
font-family: "Helvetica","Tahoma",sans-serif; | |
font-weight: normal; | |
margin: 100px auto; | |
padding: 0; | |
list-style: none; | |
padding: 0; | |
text-align: center; | |
} | |
.speakers-list li { | |
margin: 0%; | |
padding-bottom: 60px; | |
} | |
@media only screen and (min-width: 500px) { | |
.speakers-list li { | |
float: left; | |
width: 50%; | |
clear: none; | |
margin: 0%; | |
} | |
} | |
@media only screen and (min-width: 800px) { | |
.speakers-list li { | |
width: 33%; | |
clear: none; | |
} | |
} | |
.avatar { | |
transform:scaleX(0.75); | |
-ms-transform:scaleX(0.75); | |
-webkit-transform:scaleX(0.75); | |
display: block; | |
width: 130px; | |
height: 130px; | |
margin: 0 auto 3em; | |
} | |
.avatar span, | |
.avatar a { | |
transform:rotate(45deg); | |
-ms-transform:rotate(45deg); | |
-webkit-transform:rotate(45deg); | |
display: block; | |
overflow: hidden; | |
height: 100%; | |
width: 100%; | |
position: relative; | |
border: 5px solid #fff; | |
} | |
.avatar img { | |
position: absolute; | |
top: -25%; | |
left: -25%; | |
height: 150%; | |
width: 150%; | |
min-width: 150%; | |
transform:rotate(-45deg) scaleX(1.4); | |
-ms-transform:rotate(-45deg) scaleX(1.4); | |
-webkit-transform:rotate(-45deg) scaleX(1.4); | |
backface-visibility: hidden; | |
-webkit-backface-visibility: hidden; | |
} | |
.avatar a:hover { border-color: #e62b1e; } | |
h3 { | |
margin: 0 0 1em 0; | |
font-weight: normal; | |
line-height: 1.4em; | |
text-rendering: optimizelegibility; | |
} | |
h3 span { | |
display: block; | |
border: none; | |
color: #9d9d9d; | |
font-size: 0.7em; | |
letter-spacing: 1px; | |
} |