Make CSS Hover state remain after "unhovering"

Question

I'm facing a small issue that I've never really had to deal with before. I'm a beginner web designer, and I recently used the CSS hover feature on a div on my webpage. Another image is revealed when one hovers over this div; however, the new image disappears when you "unhover", and I would like it to stay visible.

Here is an example of the code that I am using:

#about { height: 25px; width: 84px; background-image: url('about.png'); position: absolute; top: 200px; left: 0px; }  #onabout { height: 200px; width: 940px; position: absolute; top: 60px; left: 0px; color: #fff; font-family: 'Lato', sans-serif; font-size: 15px; font-weight: 300; display: none; }  #about:hover #onabout { display: block; } 

Is there any way to solve this using just CSS? I haven't used any javascript thus far and I'm not very comfortable with it.

Either way, any solutions will be gladly accepted! Thanks so much.

Answer 1

Here i go with my CSS idea.

You may use transition-delay; http://jsfiddle.net/nAg7W/

div img {     position:absolute;     opacity:0;     transition:0s 180s; } div:hover img {     opacity:1;     transition:0s; } div {     line-height:1.2em;     font-size:1em;     color:black;     transition:0s 180s; } div:hover {     line-height:0;     font-size:0;     color:transparent;     transition:0; } 

markup:

<div>some text to hover to see an image wich is hidden as you read this <img src="http://placehold.it/200x200&text=zi image" /> 

it could be possible as well, to click, so it fades away. http://jsfiddle.net/nAg7W/1/

div:hover img:focus {/* includes tabindex in html tag for img */    opacity:0;    transition:3s;    -webkit-transform:rotate(-360deg) scale(0.23);    -webkit-transform:rotate(-360deg) scale(0.23);    -moz-transform:rotate(-360deg) scale(0.23);    -o-transform:rotate(-360deg) scale(0.23);    -ms-transform:rotate(-360deg) scale(0.23);    transform:rotate(-360deg) scale(0.23); }