I am using CSS transform and transition properties. When I hover the image, the button shows up as expected over the image. The problem I found now is that when I focus on the image by pressing the TAB key, the image simply disappears and only the button shows.
Html:
<div class="main">
<img src="phone.jpg" >
<div class="paragraph">This wil be centered</div>
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
CSS:
.clearfix{
clear: both;
}section
{
text-align: center;
}
.main{
float:left;
width:30%;
text-align: center;
border:10px solid white;
width:306px;
height:306px;
margin : 50px auto;
box-shadow: 0px 0px 25px black;
overflow: hidden;
}
.paragraph{
-webkit-transform: translateY(-300%);
border: 5px solid grey;
background-color: grey;
opacity: 0.5;
}
.main:hover .content,
.main:focus .content{
-webkit-transform: translateY(-340px);
-webkit-transition: -webkit-transform 700ms;
}
.content{
width: 306px;
height: 306px;
background: rgba(51, 102, 255, 0.5);
}
img{
height:inherit;
width:inherit;
-webkit-transition: -webkit-transform 5000ms;
}
button{
width: 100%;
height: 50px;
margin-top: 100px;
background: black;
border: 0;
cursor: pointer;
color: white;
font: 16px tahoma;
}
button:hover{
opacity: 0.5;
}
How can I overcome this problem in a way that the same effect happens on FOCUS?
i only want my content (without navigation bars and header) scroll-able and not the whole page.
i have been trying for hours playing with positions, overflows and more.
i think it has something to do with the header...
i am frustrated - can anyone help?
thanks in advance!
website: https://jsfiddle.net/ronz2/0zxc13yv/3/
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800,300);
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html
{
height: 100%;
}
body
{
font-family: 'Open Sans';
height: 100%;
min-height: 100%;
box-sizing: border-box;
overflow: hidden;
}
a
{
text-decoration: none;
}
div#header
{
width: 100%;
height: 62px;
background-color: #2980b9;
margin: 0;
}
div#mssg
{
display: inline-block;
margin: 7px;
padding: 2px;
text-align: center;
border-width: 5px;
border-color: #67C8FF;
border-style: solid;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
transition: 0.1s;
}
div#mssg p
{
font-size: 1.5em;
color: White;
}
div#mssg:hover
{
margin-top: 5px;
padding-top: 4px;
padding-bottom: 4px;
border-style: solid dashed solid dashed;
}
.logo
{
float: left;
margin-top: 4px;
margin-left: 15px;
}
.logo img
{
width: 140px;
}
div#container
{
margin-top: 62px;
width: 100%;
margin: 0;
height: 100%;
}
.sidebar
{
width: 250px;
height: 100%;
min-height: 100%;
background-color: #171717;
float: left;
}
.topbar
{
width: 100%;
background-color: #171717;
text-align: center;
}
ul#topnav li
{
display: inline-block;
list-style: none;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
transition: 0.2s;
}
ul#topnav img
{
width: 10px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
transition: 0.2s;
}
ul#topnav li a
{
display: inline-block;
color: #ccc;
font-size: 1em;
padding-left: 5px;
padding-right: 5px;
margin-right: 0px;
border-left: 1px solid #67C8FF;
border-right: 1px solid #67C8FF;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
transition: 0.2s;
}
ul#topnav li a:hover
{
background-color: Gray;
color: #fff;
}
ul#topnav li a:hover img
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
ul#topnav ul
{
display: none;
}
ul#topnav li:hover > ul
{
display: block;
background-color: #171717;
position: absolute;
}
ul#topnav ul li
{
display: block;
margin-left: 0px;
}
ul#topnav ul li a
{
display: block;
width: 130px;
border-bottom: 1px solid #67C8FF;
border-top: 1px solid #67C8FF;
}
ul#nav li
{
list-style: none;
border-bottom: 1px solid #67C8FF;
border-top: 1px solid #67C8FF;
}
ul#nav li a
{
color: #ccc;
display: block;
padding: 10px;
font-size: 1em;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
transition: 0.2s;
}
ul#nav li a:hover
{
background-color: #030303;
color: #fff;
padding-left: 30px;
}
div#content
{
width: auto;
height: 100%;
background-image: url("../Images/spaceBG.jpg");
background-size: cover;
background-repeat: no-repeat;
padding: 15px;
overflow-y: scroll;
}
div#content h1
{
color: White;
text-shadow: 4px 0 9px rgba(86,170,255,0.9) , 0 0 30px rgba(14,134,209,1) , 0 0 30px rgba(14,134,209,1);
}
div#content p
{
color: White;
font-size: 1em;
text-shadow: 2px 1px Black;
}
div#box
{
margin-top: 15px;
}
div#box .box-top
{
color: #fff;
text-shadow: 0px 1px #000;
background-color: #2980b9;
padding: 5px;
padding-left: 15px;
font-weight: 300;
font-size: 1.5em;
}
div#box .box-panel
{
padding: 15px;
background-color: rgba(0, 20, 26, 0.89);
color: White;
font-size: 1.5em;
}
div#box .box-panel img
{
vertical-align: middle;
width: 450px;
}
.link
{
color: #67C8FF;
transition: 0.2s;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
}
.link:hover
{
color: #67C8FF;
text-shadow: 0px 0px 5px White;
}
div#box .box-panel .icon
{
width: 30px;
}
.form
{
margin-top: 10px;
margin-bottom: 10px;
}
.form fieldset legend
{
background-color: #2980b9;
padding: 0 5px 0 5px;
margin: 5px;
}
.field
{
padding-left: 15px;
color: White;
text-shadow: 2px 1px Black;
}
.input
{
padding: 10px 20px;
margin: 5px 0 5px 0;
border: 1px solid #b7b7b7;
border-radius: 3px;
color: rgba(0,142,198,1);
text-overflow: clip;
background-color: White;
-webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,0.5) inset;
box-shadow: 0 0 5px 2px rgba(0,0,0,0.5) inset;
-webkit-transition: all 200ms;
-moz-transition: all 200m;
transition: all 200ms;
}
.input:focus
{
box-shadow: 0 0 5px 2px #2980b9 inset;
}
.options
{
color: White;
width: 150px;
padding: 5px;
font-size: 16px;
line-height: 1;
border-radius: 3px;
background: url(../Images/arrowDown.png) no-repeat right rgba(0,142,198,0.7);
-webkit-appearance: none;
}
.button
{
cursor: pointer;
padding: 10px 20px;
border: 1px solid #018dc4;
-webkit-border-radius: 3px;
border-radius: 3px;
color: rgba(255,255,255,1);
text-overflow: clip;
background: #0199d9;
text-shadow: 0 0 7px rgba(0,0,0,1);
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
.button:hover
{
-webkit-box-shadow: 0 0 4px 2px rgba(126,193,234,1);
box-shadow: 0 0 4px 2px rgba(126,193,234,1);
-webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.button:active
{
-webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,0.5) inset;
box-shadow: 0 0 4px 1px rgba(0,0,0,0.5) inset;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
table
{
border-collapse: collapse;
}
table#imgs
{
padding-left: 95px;
}
table#imgs tr td
{
padding: 15px;
}
.userTable
{
font-size: 20px;
}
.userTable th , .userTable td
{
padding: 0px 2px 0px 2px;
border-bottom: 1px solid #67C8FF;
text-align: left;
border-left: 1px solid #67C8FF;
}
th.userTable
{
text-align: center;
}
.userNum
{
text-align: center;
margin-top: 10px;
}
.visit
{
color: White;
margin: 15px;
}
<head runat="server">
<title>UniSci</title>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
<a href="Default.aspx">
<img src="Images/logo.png" alt="logo" /></a>
</div>
</div>
<div class="topbar">
<ul id="topnav">
<li><a href="darkEn.aspx">Dark Energy
</a>
<ul>
<li>Types</li>
</ul>
</li>
<li><a href="darkMat.aspx">Dark Matter
</a>
<ul>
<li>Types</li>
</ul>
</li>
<li><a href="galaxy.aspx">Galaxies
</a>
<ul>
<li>Creation</li>
<li>Types</li>
</ul>
</li>
<li><a href="gasGiant.aspx">Gas Giants
</a>
<ul>
<li>Types</li>
</ul>
</li>
<li><a href="universe.aspx">The Universe
</a>
<ul>
<li>Creation</li>
<li>Destruction</li>
</ul>
</li>
<li><a href="spacetime.aspx">Spacetime
</a>
<ul>
<li>Relativity</li>
</ul>
</li>
<li><a href="supernova.aspx">Supernova
</a>
<ul>
<li>Effect On Earth</li>
</ul>
</li>
<li><a href="star.aspx">Stars
</a>
<ul>
<li>Life Course</li>
</ul>
</li>
<li><a href="starSys.aspx">Star Systems
</a>
<ul>
<li>Multiple star</li>
<li>Types</li>
</ul>
</li>
<li><a href="universe-dest-info.aspx">Universe Death
</a>
<ul>
<li>Big Bounce</li>
<li>Big Crunch</li>
<li>Big Freeze</li>
<li>Big Rip</li>
</ul>
</li>
<li><a href="gravity.aspx">Gravity
</a>
<ul>
<li>Waves</li>
<li>Relativity</li>
</ul>
</li>
<li><a href="big-bang.aspx">Big Bang
</a>
<ul>
<li>Evidence</li>
<li>Misconceptions</li>
</ul>
</li>
<li><a href="black-hole.aspx">Black Holes
</a>
<ul>
<li>Creation</li>
<li>Destruction</li>
</ul>
</li>
<li><a href="wormhole.aspx">Wormholes
</a>
<ul>
<li>Creation</li>
<li>Shape</li>
</ul>
</li>
<li><a href="extra.aspx">Extras
</a>
<ul>
<li>Comets</li>
<li>Asteroids</li>
</ul>
</li>
</ul>
</div>
<div class="sidebar">
<ul id="nav">
<li>Main Page</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
<div id="content"> <h1>
Galaxy
</h1>
<div id="box">
<div class="box-top">
What types of galaxies are there?
</div>
<div class="box-panel">
Ellipticals:<br />
The Hubble classification system rates elliptical galaxies on <br />
the basis of their ellipticity, ranging from E0, being nearly <br />
spherical, up to E7, which is highly elongated. These galaxies <br />
have an ellipsoidal profile, giving them an elliptical appearance <br />
regardless of the viewing angle. Their appearance shows little structure <br />
and they typically have relatively little interstellar matter. <br />
Consequently, these galaxies also have a low portion of open <br />
clusters and a reduced rate of new star formation. Instead they <br />
are dominated by generally older, more evolved stars that are orbiting <br />
the common center of gravity in random directions. The stars <br />
contain low abundances of heavy elements because star formation ceases <br />
after the initial burst. In this sense they have some similarity to the <br />
much smaller globular clusters.<br />
<br />
Shell galaxy:<br />
A shell galaxy is a type of elliptical galaxy where the stars in <br />
the galaxy's halo are arranged in concentric shells. About one-tenth <br />
of elliptical galaxies have a shell-like structure, which has never<br />
been observed in spiral galaxies. The shell-like structures are <br />
thought to develop when a larger galaxy absorbs a smaller companion<br />
galaxy. As the two galaxy centers approach, the centers start to oscillate <br />
around a center point, the oscillation creates gravitational <br />
ripples forming the shells of stars, similar to ripples spreading on water. <br />
For example, galaxy NGC 3923 has over twenty shells.<br />
<br />
Spirals:<br />
Spiral galaxies resemble spiraling pinwheels. Though the stars and other<br />
visible material contained in such a galaxy lie mostly on a plane, the <br />
majority of mass in spiral galaxies exists in a roughly spherical halo of <br />
dark matter that extends beyond the visible component, as demonstrated <br />
by the universal rotation curve concept. Spiral galaxies consist of a rotating <br />
disk of stars and interstellar medium, along with a central bulge of generally <br />
older stars. Extending outward from the bulge are relatively bright arms. <br />
It appears the reason that some spiral galaxies are fat and bulging while some <br />
are flat discs is because of how fast they rotate.
</div>
The header is not problem,
The body is set to overflow:hidden which is why the bottom will not show
Change the height of the container similar to this:
#container {
margin-top: 62px;
width: 100%;
margin: 0;
height: calc(100% - 131px);
}
The problem is the exact px value you subtract: Depending on the width of the viewport, your nav is spread over a different number of lines. Either fix the height of #topnav or use media queries with different height calculations for #container.
ADDED fiddle: https://jsfiddle.net/s3qeu8vu/
Ive tried using z-index to over rule the absolute and relative positioning on the box hovers but it just doesn't work. Any body got any suggestions as to why? The links are there but to the side of the images rather than directly above.
HTML
<div id="container1">
<img src="images/blindsided1.jpg">
<div class="textbox">
<p id="title1">First Coding <br> Attempt</br></p>
<p id="text1"> This brief was my first attempt at designing a website.</p>
</div>
</div>
CSS
a:hover {
z-index: 99;
}
#container1 {
position:absolute;
float:left;
}
.textbox:hover {
opacity:1;
}
#title1 {
padding-top: 20px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:32px;
word-spacing:2px;
letter-spacing:1px;
text-decoration:underline;
}
#text1 {
padding-top:40px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:16px;
word-spacing:2px;
letter-spacing:1px;
}
.textbox {
width:361px;
height:362px;
position:absolute;
top:0;
left:0;
opacity:0;
border-radius:300px;
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
You can wrap the whole hoverable div in the anchor tag, that way you can ensure that the hoverable div is clickable and that it points to the link that the image is referencing.
HTML
<div id="container1">
<a href="firstcoding.html">
<img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png">
<div class="textbox">
<p id="title1">First Coding
<br>Attempt</br>
</p>
<p id="text1">
This brief was my first attempt at designing a website.
</p>
</div>
</a>
</div>
CSS
a:hover {
z-index: 99;
}
.textbox:hover {
opacity:1;
}
#title1 {
padding-top: 20px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:32px;
word-spacing:2px;
letter-spacing:1px;
text-decoration:underline;
}
#text1 {
padding-top:40px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:16px;
word-spacing:2px;
letter-spacing:1px;
}
.textbox {
width:361px;
height:362px;
position:absolute;
top:0;
left:0;
opacity:0;
border-radius:300px;
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
The absolutely positioned child is sitting on top of the anchor link so any pointer interaction would fail.
You could use pointer-events:none on that child which would allow events to pass through but browser support it not great.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a,
img {
display: block;
}
#container1 {
position: relative;
border: 1px solid red;
float: left;
}
#container1:hover .textbox {
opacity: 1;
}
#title1 {
padding-top: 20px;
text-align: center;
color: #FFF;
font-family: "bebas";
font-size: 32px;
word-spacing: 2px;
letter-spacing: 1px;
text-decoration: underline;
}
#text1 {
padding-top: 40px;
text-align: center;
color: #FFF;
font-family: "bebas";
font-size: 16px;
word-spacing: 2px;
letter-spacing: 1px;
}
.textbox {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
pointer-events: none;
}
<div id="container1">
<a href="firstcoding.html">
<img src="http://lorempixel.com/output/cats-h-c-361-362-10.jpg" />
</a>
<div class="textbox">
<p id="title1">First Coding
<br/>Attempt
</p>
<p id="text1">This brief was my first attempt at designing a website.</p>
</div>
You would do better to wrap the div inside the link and re-factor your code as suggested in the comments.
I'm using this modal box made from html and css on my website. It turns out fine for the main part, but I'm having a problem with the background fade.
It somehow only fades the background on the part of the site that appears over the position of the box (in the code). I'm using ID's to identify sections of the site (which is a one-page site) for the links in the menu. All sections that are below the section that contains the modal box, doesn't get faded.
Here is some of the code:
<div class="wrapper">
<a href="#modal" class="btn go">
<img src="img/i3.1.jpg" alt="image" />
</a>
<div id="modal">
<link href="css/modal.css" rel="stylesheet">
<div class="modal-content">
<div class="header">
<h2>Modal Heading</h2>
</div>
<div class="copy">
<p>Sample text in modal</p>
</div>
<div class="cf footer">
Close
</div>
</div>
<div class="overlay"></div>
</div>
And the CSS:
#modal {
left:50%;
margin:-250px 0 0 -40%;
opacity: 0;
position:absolute;
top:-50%;
visibility: hidden;
width:80%;
box-shadow:0 3px 7px rgba(0,0,0,.25);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target {
opacity: 1;
top:50%;
visibility: visible;
}
#modal .header,#modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border:none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin:0;
}
#modal .btn {
float:right;
}
#modal .copy,#modal .header, #modal .footer {
padding:15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius:5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
Can you guys help me figure this out?
Thank you so much
/Jonas
I am learning HTML 5 and CSS3 and am having trouble with my tabbed navigation bar. I thought the li:active css stlye would achieve my goal but that only is upon click and doesn't stay that way. I have looked at many tutorials across the web and cannot find out how to do this with just CSS and HTML. I would like to avoid using javascript or php if possible. I have found information in a few places on "child" elements and using the z-index properties, and think this may be a possible solution, but do not understand how to implement them. They look how I want on hover, but I want them to stay that style when I click them to give the effect of an active tab. Any advice or help is greatly appreciated.
My HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
Header
</header>
<nav>
<ul id="tabs">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</nav>
<article>
Article of Content
</article>
<aside align="right">
Aside of Content
</aside>
<footer>
<span id="cpyrt">© 2013 Footer Content</span>
</footer>
</body>
</html>
MY CSS:
body {
top: 0;
width: 80%;
position: fixed;
margin-left: 10%;
margin-right: 10%;
box-shadow: #000 0px 0px 900px;
height: 100%;
}
header {
background-color: #06F;
height: 8%;
padding: 9px;
padding-top: 25px;
box-shadow: inset #000 0px 1px 2px;
}
nav{
background-color: #333;
box-shadow: inset #000 -10px -15px 50px;
float:left;
width: inherit;
height: 59px;
}
/*--------------Navigation Tabs Styling ----- START -----------------------------*/
nav li{
list-style-type: none;
display: inline-table;
background-color: #666;
padding-top:15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:7px;
border-top-left-radius:15px;
border-top-right-radius:15px;
text-align:center;
-webkit-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s ease;
-moz-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s ease;
-o-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s ease;
box-shadow: #000 0px 1px 10px;
color: white;
}
nav li:hover{
list-style-type: none;
display: inline-table;
background-color:#09F;
padding-top:15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:7px;
border-top-left-radius:15px;
border-top-right-radius:15px;
color: black;
text-align:center;
box-shadow: inset #FFF 0px 1px 4px;
height: 30px;
margin-top: -3px;
}
nav li:active{
list-style-type: none;
display: inline-table;
background-color:#02F;
padding-top:15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:7px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border:none;
}
/*--------------Navigation Tabs Styling ----- END -----------------------------*/
article{
padding: 5px;
float: left;
background-color: #ddd;
height: inherit;
width: inherit;
box-shadow: inset #000 0px 1px 2px;
}
aside{
top: auto;
padding: 10px;
position: fixed;
right: 10%;
background-color: #CCC;
width: 17%;
height: inherit;
float: right;
box-shadow: inset #000 0px 1px 2px;
}
footer {
position: fixed;
bottom: 0;
background-color: #06F;
width: inherit;
height:8%;
padding-top: 5px;
box-shadow: inset #000 0px 1px 2px;
margin-right: 15px;
}
:active only applies to anchors (<a>) and buttons (<button>, <input type="button/>...) and only while they are pressed.
You need to take a look at :target
http://jsfiddle.net/coma/ED6cH/6/
HTML
<div class="tabbed">
<a href="#dog" id="dog">
Dog
<div>
<p>This is a dog...</p>
</div>
</a>
<a href="#cat" id="cat">
Cat
<div>
<p>This is a cat...</p>
</div>
</a>
<a href="#foo" id="foo">
Foo
<div>
<p>This is a foo...</p>
</div>
</a>
</div>
CSS
div.tabbed {
position: relative;
font-size: 0;
}
div.tabbed > a {
display: inline-block;
padding: .5em;
font-size: 16px;
border-radius: 3px 3px 0 0;
background-color: #333;
color: #eee;
text-decoration: none;
line-height: 1em;
}
div.tabbed > a + a {
margin-left: .5em;
}
div.tabbed > a:target {
color: #333;
background-color: #eee;
}
div.tabbed > a > div {
position: absolute;
top: 100%;
left: 0;
width: 300px;
padding: .5em;
border-radius: 0 3px 3px 3px;
display: none;
color: #333;
background-color: #eee;
}
div.tabbed > a:target > div {
display: block;
}
The :target pseudo selector matches what's in the URL hash (http://foo.com#this_is_the_hash) with the element having that hash string as id.
There is another hackish method using transition with very long time:
http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/
Insane:
http://dabblet.com/gist/2076449