User:OH&S/wikia.css

/* Sandbox for CSS code */

/* spin animation */ @keyframes spin { from  	{transform: rotate(0deg);} to 		{transform: rotate(360deg);} }

/* apply spin animation to images in img-spin class containers*/ .img-spin img { animation-name: spin; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; }

div.weblinks { display: inline-flex; width: 169px; }

div.weblinks img { vertical-align: middle; transition: opacity 0.5s; }

/* style properties for images in weblinks div */ .sharpen img { max-width: 100%; height: auto; }

/* style properties for images in weblinks div on hover */ div.weblinks img:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ transition: opacity 0.5s; }

/** Tooltip container **/ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ }

/* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 150px; top: 100%; left: 50%; margin-left: -75px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text - see examples below! */   position: absolute; z-index: 1; /* Opacity */ opacity: 0; transition: opacity 1s; }

.tooltip .tooltiptext::after { content: " "; position: absolute; bottom: 100%; /* At the top of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; }

/* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; transition: opacity 1s; }