effect: hover and: active for image

Question

effect: hover and: active for image

Navigation

#1 by (3 votes)

3

As you can see in the code below, I have 3 links with an image in each of them, which point to an iframe just below. These images are grayscale, but by hovering over them they are colored thanks to the class "step" . But I would like the effect that the hover does to stay permanent until I click somewhere else, is it possible to do this only with html and css?

        <a href="passo1.html" target="janela">
            <img id="passo1" class="passo" src="img/passo_color1.png" style="float:left">
        </a>
        <a href="passo2.html" target="janela">
            <img id="passo2" class="passo" src="img/passo_color2.png" style="left: 348px; float:left; position: absolute">
        </a>
        <a href="passo3.html" target="janela">
            <img id="passo3" class="passo" src="img/passo_color3.png" style="left: 685px; float:left; position: absolute">
        </a>

Hugs !!

html css hover

asked by anonymous 08.08.2015 / 01:00

1 answer

Create document templates in Java How to present the error coming from MySQL?

score 3 · Answer 1

Well, here's an example of what I understand you want: JSFiddle

It was not clear to me the "other place" that needs to be clicked for the hover state to exit, so I just made a template that holds the hover state (using the transition-delay property) by coloring a grayscale image.

.passo {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */     
  transition:0s 180s;
}

.passo:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  transition:0s;
}

References:

Grayscale

Keep hover effect