I personally can't recreate the problem, but a user is seeing blurring on the text within tooltips. She's running an up-to-date version of Chrome on a modern Windows machine. She says it's pretty hard to even make out what the text says.
/* The question mark that the user clicks on */
.tooltip_wrapper {
font-size: 14px;
display: inline-block;
margin-left: 10px;
padding: 0 10px;
background: #ececec;
color: #555;
cursor: help;
font-family: "Gill Sans", Impact, sans-serif;
position: relative;
text-align: center;
-webkit-transform: translateZ(0); /* WebKit flicker fix */
-webkit-font-smoothing: antialiased; /* WebKit text rendering fix */
z-index: 900;
}
.tooltip_wrapper .tooltip {
background: #1496bb;
bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0; /* This hides the box when not hovering */
padding: 20px;
pointer-events: none;
position: absolute;
width: 400px;
-webkit-transform: translate(10px);
-moz-transform: translate(10px);
-ms-transform: translate(10px);
-o-transform: translate(10px);
transform: translate(10px);
/* These used to be all translateY */
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
/* -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); */
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.tooltip_wrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.tooltip_wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
right: 88%;
margin-left: -13px;
position: absolute;
width: 0;
}
.tooltip_wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translate(0px);
-moz-transform: translate(0px);
-ms-transform: translate(0px);
-o-transform: translate(0px);
transform: translate(0px);
/* These used to be all translateY */
}
/* Internet Explorer can just show/hide with no transition */
.lte8 .tooltip_wrapper .tooltip {
display: none;
}
.lte8 .tooltip_wrapper:hover .tooltip {
display: block;
}
<h1>
Some header to create space
</h1>
<div class='tooltip_wrapper'>?<div class='tooltip'>This is the tooltip text</div></div>
I've set up a JSFiddle on that site too, https://jsfiddle.net/rsnbtph7/#&togetherjs=xDN35iPAvV.
Where should I tweak the code so these users aren't disadvantaged?!
CalvT got it in one - I changed the font to Arial and the problem is now gone.
Yes Changing font-family is really works, just paste this line in your css and you will be done.
.tooltip {
font-family: Arial,sans-serif !important;
}
Related
I'm working on a CSS slider animation.
Everything is pretty much done apart from one last thing:
The wanted behaviour is that if I hover over the slider thumb, the slider grows in height and the value moves in the centre of the slider. This works as expected, however when the slider thumb goes underneath the newly positioned value, it goes back to the previous size (basically reverting the animation).
I think that I need some sort of "pass-through", so that basically even if I'm not technically hovering on the slider, the value doesn't interfere at all with my animation.
I know, it is not clear at all, that's why I'm including a codepen to help you better understand what I mean. Change the slider and stop it at 29. Then try sliding again and you will see the wrong effect and what I mean.
https://codepen.io/NickHG/pen/NYOoXR?editors=0110
I'm also posting the code here for future reference: (note: is done using LESScss):
#temp0-14: #185fb6;
#temp15-19: #00bcd4;
#temp20-23: #ffc107;
#temp24-31: #ef6b52;
#gaps: 8, 4, 4, 15;
#temps: #temp24-31, #temp20-23,#temp15-19, #temp0-14;
#darkText: #000;
#lightText: #fff;
#percentage: 20%;
#desaturate-percentage: 40%;
.gaps-loop(#i, #prevgap) when (#i > 0) {
#gap: extract(#gaps, #i);
#temp: extract(#temps, #i);
.span-gen-loop(#j) when (#j < #gap) {
#k: #j + #prevgap;
.temp-#{k} {
display: block;
background: #temp;
color: contrast(#temp, #darkText, #lightText, #percentage);
&:hover {
//background: darken(#temp, 8%);
}
}
.temp-color-#{k} {
color: contrast(#temp, #darkText, #lightText, #percentage);
}
.span-gen-loop(#j + 1);
}
.span-gen-loop(0);
.gaps-loop(#i - 1, #prevgap + #gap);
}
.gaps-loop(length(#gaps), 0);
.animate-color-change {
transition: background 0.8s ease;
}
/* Slider custom style */
#entryHeight: 60px;
#sliderTrackHeight: 25px;
#sliderThumbHeight: #sliderTrackHeight;
#sliderThumbWidth: 25px;
.entry-external-container {
font-family: "Roboto", sans-serif;
height: #entryHeight;
min-height: #entryHeight;
width: 100%;
max-width: 400px;
display: block;
border: 1px solid black;
display: flex;
align-items: flex-end;
padding: 0;
margin: 0;
position: relative;
.dataName {
display: block;
width: 100%;
position: absolute;
top: 0;
transform: translateY(50%);
padding-left: 10px;
z-index: 2;
animation-timing-function: ease-out;
animation: dataNameIn 0.4s forwards;
}
.dataValue {
display: block;
width: 25px;
position: absolute;
top: 0;
text-align: right;
right: 10px;
transform: translateY(50%);
padding-right: 10px;
z-index: 2;
animation-timing-function: ease-in-out;
animation: dataValueZoomOut 0.1s forwards;
}
.slidecontainer {
width: 100%;
box-sizing: content-box;
.custom-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: #sliderTrackHeight;
outline: none;
opacity: 0.7;
margin: 0;
animation: sliderAnimationBackgroundOut 0.3s;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: #sliderThumbWidth;
height: #sliderThumbHeight;
background: white;
cursor: pointer;
transition: height 0.25s, box-shadow 0.4s;
border: 1px solid rgba(0, 0, 0, 0.6);
box-sizing: border-box;
border-radius: 3px;
}
&:hover,
&:active {
&~.dataName {
animation: dataNameOut 0.4s forwards;
}
&~.dataValue {
animation: dataValueZoomIn 0.4s forwards;
&:hover{pointer-events:none;}
}
animation: sliderAnimationBackgroundIn 0.3s forwards;
&::-webkit-slider-thumb {
border-radius: 0px 3px 3px 0;
height: #entryHeight;
box-sizing: border-box;
border-right: 1px solid rgba(0, 0, 0, 0.5);
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
border-left: none;
-webkit-box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
background: -webkit-gradient(
linear,
-20 0,
100% 0,
from(transparent),
to(white),
color-stop(80%, white)
);
}
}
}
}
}
#keyframes sliderAnimationBackgroundIn {
0% {
opacity: 0.7;
height: #sliderTrackHeight;
}
100% {
opacity: 1;
height: #entryHeight;
}
}
#keyframes sliderAnimationBackgroundOut {
0% {
opacity: 1;
height: #entryHeight;
}
100% {
opacity: 0.7;
height: #sliderTrackHeight;
}
}
#keyframes dataNameOut {
0% {opacity: 1;top: 0}
20% {opacity: 0;top: -15px}
100% {top: -40px;opacity: 0}
}
#keyframes dataNameIn {
0% {top: -40px;opacity: 0}
20% {opacity: 0;top: -15px}
100% {opacity: 1;top: 0}
}
#keyframes dataValueZoomIn {
0% { transform: scale(1); top: 5px; right: 7.5px;}
25% { transform: scale(1.2); top: 10px; right: 10px;}
50% { transform: scale(1.3); top: 15px;right: 11px;}
75% { transform: scale(1.4); top: 20px;right: 13px;}
100% { transform: scale(1.5);top: 20px;right: 13.7px;}
}
#keyframes dataValueZoomOut {
100% { transform: scale(1); top: 5px; right: 7.5px;}
75% { transform: scale(1.2); top: 10px; right: 10px;}
50% { transform: scale(1.3); top: 15px;right: 11px;}
25% { transform: scale(1.4); top: 20px;right: 13px;}
0% { transform: scale(1.5);top: 20px;right: 13.7px;}
}
use pointer-events to prevent an element from being hovered :
The pointer-events CSS property specifies under what circumstances (if
any) a particular graphic element can become the target of mouse
events.
.dataValue {
pointer-events: none;
}
PEN
You could achieve the same effect setting the hover state to the parent.
PEN
.slidecontainer {
width: 100%;
box-sizing: content-box;
&:hover {
.custom-slider {
...
}
}
}
Note: Is not a good practice to nest more than 3 levels deep,
I have this code: https://jsfiddle.net/e0u4sow1/6/
It works, I added a arrow beneath the text when you hover over the image. I want that arrow to slide in from the left to the center with a slow end and when you move your mouse away to slide right with a slow start. I spend 2 hours now trying many things to get this to work, but I give up. Can someone help me with this? also maybe a small explanation as to what part in the code makes the arrow slide in and out? I removed all code with arroweffect relations, so it's just the original effect with the arrow added
.media {
display: inline-block;
position: relative;
vertical-align: top;
}
.media__image {
display: block;
}
.media__body {
background: rgba(41, 128, 185, 0.7);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3.75em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.media__body:hover {
opacity: 1;
}
.media__body:after,
.media__body:before {
border: 1px solid rgba(255, 255, 255, 0.7);
bottom: 1em;
content: '';
left: 1em;
opacity: 0;
position: absolute;
right: 1em;
top: 1em;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: 0.6s 0.2s;
transition: 0.6s 0.2s;
}
.media__body:before {
border-bottom: none;
border-top: none;
left: 2em;
right: 2em;
}
.media__body:after {
border-left: none;
border-right: none;
bottom: 2em;
top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.media__body h2 {
margin-top: 0;
}
.media__body p {
margin-bottom: 1.5em;
}
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #FFF inset;
transform: rotate(135deg);
}
<h1>MR Cube</h1>
<div class="media">
<a href="http://www.google.nl/">
<img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
<div class="media__body">
<h1>Lees meer</h1>
<div class="arr"></div>
</div>
</a>
As you didn't post your try to make the animation, it's hard to explain what you did wrong.
I made the animation in the following example adding translate on the arrow and removing it on hover. The transition decalration makes the animation between both states.
.media {
display: inline-block;
position: relative;
vertical-align: top;
}
.media__image {
display: block;
}
.media__body {
background: rgba(41, 128, 185, 0.7);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3.75em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.media__body:hover {
opacity: 1;
}
.media__body:after,
.media__body:before {
border: 1px solid rgba(255, 255, 255, 0.7);
bottom: 1em;
content: '';
left: 1em;
opacity: 0;
position: absolute;
right: 1em;
top: 1em;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: 0.6s 0.2s;
transition: 0.6s 0.2s;
}
.media__body:before {
border-bottom: none;
border-top: none;
left: 2em;
right: 2em;
}
.media__body:after {
border-left: none;
border-right: none;
bottom: 2em;
top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.media__body h2 {
margin-top: 0;
}
.media__body p {
margin-bottom: 1.5em;
}
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #FFF inset;
transform: translateX(250px) rotate(135deg);
transition: transform .8s ease-in;
}
.media__body:hover .arr {
transform: translateX(0) rotate(135deg);
transition-timing-function: ease-out;
}
<div class="media">
<a href="http://www.google.nl/">
<img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
<div class="media__body">
<h1>Lees meer</h1>
<div class="arr"></div>
</div>
</a>
Note that you will need to add the vendor prefixes to the transition and transform properties for browser support (see canIuse for 2D transform and transitions)
I would also suggest you read up on MDN about transforms and transitions.
I have a tooltip box and it is working fine. Now I want to add some fade in fade out once the tool-tip box pops in and out.
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Demo : http://jsfiddle.net/squidraj/FHUbA/
How about this?
http://jsfiddle.net/FHUbA/14/
.tooltip:after{
opacity: 0;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:after {
opacity:1;
}
What about this one:
http://jsfiddle.net/Roobyx/FHUbA/45/
(you can fix the styles afterwards)
HTML:
<a class="has-tooltip" href="#">
<span class="tooltip">This is some information for our tooltip.</span>
<img id="graph_one" class="graph one" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" />
</a>
CSS:
a[title].tooltip {
width:45px;
height:90px;
}
.tooltip {
display: inline-block;
position: relative;
}
.has-tooltip {
color: #555;
font-size: 16px;
display: block;
margin: 150px 75px 10px 75px;
padding: 5px 5px;
position: relative;
text-align: center;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.has-tooltip .tooltip {
background: #000;
bottom: 100%;
color: #fff;
display: block;
left: -10px;
margin-bottom: 15px;
border-radius: 5px;
opacity: 0;
padding: 20px;
position: absolute;
visibility: hidden;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.has-tooltip .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.has-tooltip .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #000 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.has-tooltip:hover .tooltip {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
I have an icon: when I click on it, an other div, which was hidden, appears just upside. But only when we hover the icon. It works perfectly on FF and Chrome, but on IE10, when you hover the div hidden, it makes it appear...
Here is the html:
<div class="enveloppe_abo" id="enveloppeabo_92">
<li class="abo">
<img src="/images/avatars/femme.gif" class="avatar_40">
</li>
<div class="bulle_abo">
<div class="avatar_abo_bulle">
<img src="/images/avatars/femme.gif" width="68" height="68">
</div>
<div class="supprabo" id="supprabo_92" alt="Remove subscription" title="Remove subscription"></div>
<div class="texte_abo_bulle">steph.toto.com
<br>
<br>Blog de blog blalala et oui de deux trois et quatre informations
<br>Encore une info et oui bien s&ucir...</div>
</div>
</div>
And the css:
.avatar_abo_bulle{
float: left;
position: relative;
height: 68px;
width: 68px;
display: block;
overflow: hidden;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0px 0px 8px 1px #000;
-webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0, 1);
-moz-box-shadow: 0px 0px 8px 1px rgba(0,0,0, 1);
}
.texte_abo_bulle{
margin-left: 90px;
-webkit-font-smoothing: antialiased;
font-size: 14px;
}
.enveloppe_abo {
position: relative;
float: left;
display: block;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
z-index:11;
}
.enveloppe_bulaut {
position: relative;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
}
.bulle_abo, .combulle {
border: 1px solid #909090;
bottom: 100%;
color: #fff;
display: block;
left: -114px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
min-width: 250px;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-moz-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-ms-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-o-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(2%,#c9c9c9), color-stop(53%,#606060)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
}
.bulle_abo{
min-height: 90px;
}
.combulle{
margin-left: -36px;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.bulle_abo:before, .combulle:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.bulle_abo:after, .combulle:after {
background: url(/themes/glace_et_ombre/images/flbas.png) no-repeat;
bottom: -20px;
content: " ";
height: 20px;
left: 144px;
margin-left: -13px;
position: absolute;
width: 20px;
}
.enveloppe_abo:hover .bulle_abo, .enveloppe_bulaut:hover .combulle{
min-height: 90px;
opacity: 0.95;
display:block;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
/* IE can just show/hide with no transition */
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle{
display: none;
}
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle {
display: block;
}
a.lien_bulle:link, a.lien_bulle:active, a.lien_bulle:visited {
color: rgb(0, 78, 194);
text-shadow: 0 1px 3px rgb(255, 255, 255);
font-size: 18px;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
a.lien_bulle:hover {
color: rgb(228, 235, 255);
text-shadow: 0 1px 0 #000;
}
The demo: http://jsfiddle.net/YRwCt/
Any solution for this please? :-(
Change
.enveloppe_abo:hover .bulle_abo, .enveloppe_bulaut:hover .combulle{
To
.abo:hover + .bulle_abo, .enveloppe_bulaut:hover .combulle {
Updated jsFiddle
You were selecting the entire container, not just the image
Re-Edit
You must also add display:none to .bulle_abo to retain the same functionality. Updated jsFiddle
.bulle_abo, .combulle {
// A bunch of lines
display: none;
// A bunch more lines
}
Another Edit
To add the animation back I created a CSS3 animation along with browser prefixes. Updated jsFiddle
To call it
animation: appear .25s linear forwards;
The keyframes for it
#keyframes appear {
0% {opacity:0; transform: translateY(10px);}
100% {opacity:1; transform: translateY(0px);}
}
The Fiddle works. Maybe you have to add the doctype at the beginning of your code:
<!DOCTYPE html>
UPDATE
here is a js-fiddle with images available: http://jsfiddle.net/TBwWw/
I am using a tutorial that I found here.
I have an unordered list that simply links the image to a larger one and also displays the image on the page.
<ul class="polaroids">
<li>
<a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!">
<img src="example/cyan_hawk.jpg" alt="Roeland!">
</a>
</li>
</ul>
And then css that is supposed to be adjusting the image size, add the polaroid effect and a whole lot more.
ul.polaroids a:after {
content: attr(title);
}
/* By default, we tilt all our images -2 degrees */
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
-webkit-transform: none;
-o-transform: none;
-ms-transform: none;
-moz-transform: none;
transform: none;
position: relative;
top: -5px;
}
/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-moz-transform: rotate(5deg);
transform: rotate(5deg);
position: relative;
right: 5px;
}
/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) a {
position: relative;
top: 8px;
right: 5px;
}
/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) a {
position: relative;
top: 3px;
left: -5px;
}
/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
ul.polaroids a:hover {
-webkit-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
-moz-transform: scale(1.25);
transform: scale(1.25);
position: relative;
z-index: 5;
}
/* Add drop shadows and smooth out the transition (Safari only) */
ul.polaroids a {
-webkit-transition: 0 .15s linear;
-moz-transition: 0 .15s linear;
-o-transition: 0 .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
/* On hover, darken the shadows a bit */
ul.polaroids a {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
The end result is supposed to be:
But they are just appearing with just the unordered list text decoration and the after title effects like so:
Everyone else in the comments on the tutorial said it worked just fine. I don't understand why it isn't working for me. I do have the css in an external style sheet that is linked and being found correctly. Finally, the Google Chrome console is showing no errors. I have tried it in Google Chrome and Internet Explorer.
Try this:
http://jsfiddle.net/jC84f/1/
ul.polaroids { width: 970px; margin: 0 0 18px -30px; }
ul.polaroids li { display: inline; }
ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; }
ul.polaroids a:after { content: attr(title); }
ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); }
ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px; -moz-transform: none; }
ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px; -moz-transform: rotate(5deg); }
ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }
ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; }
ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); }
ol.code li, ol.code li code { font-size: 14px !important; }
ol.code code { background: none; }
First off, all the images are supposed to be in a single ul, not separate ones as you have in your fiddle. Second, you're missing the list styles, and display/float properties to make things wrap.
I was able to get your example to wrap by adding the following CSS:
ul { list-style: none; }
ul li { display: inline; }
ul a {
display: inline;
float: left;
}
ul img { display: block; }
I think this is essentially what you're missing, so you'll probably want to adjust things to how you like (including spacing, classes, etc.). Here is my fiddle: http://jsfiddle.net/jC84f/3/