Make CSS Hover state remain after “unhovering”

by

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);
}

More Related Contents:

  1. Grid or Table? for Text and an Image on the bottom right (4/4) [duplicate]
  2. How do I disable the resizable property of a textarea?
  3. How do you keep parents of floated elements from collapsing? [duplicate]
  4. Center image using text-align center?
  5. Why do browsers match CSS selectors from right to left?
  6. How to remove margin space around body or clear default css styles
  7. What’s the difference if I put css file inside or ?
  8. CSS content property: is it possible to insert HTML instead of Text?
  9. background: fixed no repeat not working on mobile
  10. Creating a Zoom Effect on an image on hover using CSS?
  11. avoid page break inside row of table
  12. text-overflow: ellipsis not working
  13. Scale image to fit a bounding box
  14. Pure css Chessboard with div & no classes or ids, is it possible?
  15. How to change the size of the radio button using CSS?
  16. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  17. Same height column bootstrap 3 row responsive
  18. Making an svg image object clickable with onclick, avoiding absolute positioning
  19. Insert HTML from CSS
  20. How to change the style of a ‘s label?
  21. CSS custom cursor doesn’t work in FF/Chrome
  22. Which elements support the ::before and ::after pseudo-elements?
  23. Flexbox with fixed header and footer and scrollable content
  24. Border around specific rows in a table?
  25. Making a div that covers the entire page
  26. Word wrap a link so it doesn’t overflow its parent div width [duplicate]
  27. How to calc() the number of rows in a grid template?
  28. Using sprites with IMG tag?
  29. Is it possible to set a src attribute of an img tag in CSS?
  30. How to fill 100% of remaining height?

Leave a Comment