How to change an image on click using CSS alone?

Question

I have an image and when the image is clicked I want to reveal another image below it. I am looking for a simple CSS only solution.

Is that possible?

no. click is an event and CSS can't help you with this. you can change the image on hover. — codeandcloud
– codeandcloud, Commented Jul 25, 2011 at 9:01
Do you want to reveal the image while it is clicked, or toggle the image every time it is clicked? — Eric
– Eric, Commented Jul 25, 2011 at 9:31
Im not sure this 4 year old post will get ressurected. But how do you reveal when an image only on mouseover? — Richard Peter Targett
– Richard Peter Targett, Commented Nov 1, 2015 at 5:31
@Sidhartha - You could do something like img:hover { background: url(/path-to-image/img.jpg); } or use sprites as noted in the answer below. You can read more about hover here, here, and here — L84
– L84, Commented Nov 2, 2015 at 1:10

Eliran Malka · Accepted Answer · 2022-06-02 19:30:58Z

23

TL;DR!

input[type="checkbox"] {
    content: url('http://placekitten.com/150/160');
    appearance: none;
    display: block;
    width: 150px;
    height: 150px;
}

input[type="checkbox"]:checked {
    content: url('http://placekitten.com/170/180');
}

<input type="checkbox" />

A Pure CSS Solution

Abstract

A checkbox input is a native element served to implement toggle functionality, we can use that to our benefit.

Utilize the :checked pseudo class - attach it to a pseudo element of a checkbox (since you can't really affect the background of the input itself), and change its background accordingly.

Implementation

input[type="checkbox"]:before {
    content: url('images/icon.png');
    display: block;
    width: 100px;
    height: 100px;
}
input[type="checkbox"]:checked:before {
    content: url('images/another-icon.png');
}

Demo

Here's a full working demo on jsFiddle to illustrate the approach.

Refactoring

This is a bit cumbersome, and we could make some changes to clean up unnecessary stuff; as we're not really applying a background image, but instead setting the element's content, we can omit the pseudo elements and set it directly on the checkbox.

Admittedly, they serve no real purpose here but to mask the native rendering of the checkbox. We could simply remove them, but that would result in a FOUC in best cases, or if we fail to fetch the image, it will simply show a huge checkbox.

Enters the appearance property:

The (-moz-)appearance CSS property is used ... to display an element using a platform-native styling based on the operating system's theme.

we can override the platform-native styling by assigning appearance: none and bypass that glitch altogether (we would have to account for vendor prefixes, naturally, and the prefix-free form is not supported anywhere, at the moment). The selectors are then simplified, and the code is more robust.

Implementation

input[type="checkbox"] {
    content: url('images/black.cat');
    display: block;
    width: 200px;
    height: 200px;
    -webkit-appearance: none;
}
input[type="checkbox"]:checked {
    content: url('images/white.cat');
}

Demo

Again, a live demo of the refactored version is on jsFiddle.

References

Note: this only works on webkit for now, I'm trying to have it fixed for gecko engines also. Will post the updated version once I do.

Update: the appearance property is now widely adopted, so the use of vendor prefixes is redundant. Horay!

edited Jun 2, 2022 at 19:30

answered Jul 22, 2013 at 19:04

Eliran Malka

16.4k7 gold badges80 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

feeela Over a year ago

The CSS Ninja uses a similar approach for his Futurebox. That is a lightbox in CSS. +1 for the input idea.

Eliran Malka Over a year ago

thanks, @feeela, and pleased to meet, CSS Ninja (wow, he has really taken this to the next level, great stuff. did you see the bootstrap plugins?).

Shikkediel Over a year ago

Quite easy to make cross browser when you use a label for the input: jsfiddle.net/01cwd1wq

Shikkediel Over a year ago

The fact that the first part of the answer works on webkit related browsers is only a non-standard deviation. An input cannot have a after or before pseudo since it's not an element with a closing tag, needed to contain said pseudo element. So it's basically incorrect.

arsCynic Sep 5 at 8:06

To remove the "Submit Query" flashing text: • HTML: <span id="checkbox-image"><input type="checkbox"></span> • CSS: #checkbox-image:checked {…}. I.e., no need for the [type="checkbox"] in the CSS.

Zim84 · Accepted Answer · 2017-07-25 14:42:59Z

11

You could use an <a> tag with different styles:

a:link    { }
a:visited { }
a:hover   { }
a:active  { }

I'd recommend using that in conjunction with CSS sprites: https://css-tricks.com/css-sprites/

edited Jul 25, 2017 at 14:42

Zim84

3,5672 gold badges39 silver badges42 bronze badges

answered Jul 25, 2011 at 8:59

evilpenguin

5,4986 gold badges43 silver badges50 bronze badges

2 Comments

L84 Over a year ago

Thanks, that seems to be the best way for using a CSS only solution.

Eliran Malka Over a year ago

this doesn't allow for toggling a state (how to change the image back on an additional click?), as visited will persist until the browser cache is cleaned.

pleasedontbelong · Accepted Answer · 2011-07-25 09:26:48Z

5

some people have suggested the "visited", but the visited links remain in the browsers cache, so the next time your user visits the page, the link will have the second image.. i dont know it that's the desired effect you want. Anyway you coul mix JS and CSS:

<style>
.off{
    color:red;
}
.on{
    color:green;
}
</style>
<a href="" class="off" onclick="this.className='on';return false;">Foo</a>

using the onclick event, you can change (or toggle maybe?) the class name of the element. In this example i change the text color but you could also change the background image.

Good Luck

answered Jul 25, 2011 at 9:26

pleasedontbelong

20.1k12 gold badges55 silver badges79 bronze badges

1 Comment

Eliran Malka Over a year ago

the OP has requested a CSS only solution.

daleyjem · Accepted Answer · 2013-02-23 02:51:10Z

4

This introduces a new paradigm to HTML/CSS, but using an <input readonly="true"> would allow you to append an input:focus selector to then alter the background-image

This of course would require applying specific CSS to the input itself to override browser defaults but it does go to show that click actions can indeed be triggered without the use of Javascript.

answered Feb 23, 2013 at 2:51

daleyjem

2,7241 gold badge31 silver badges42 bronze badges

6 Comments

Eliran Malka Over a year ago

huh? please demonstrate.

daleyjem Over a year ago

Sure... So take a look at this page: daleyjem.com/sandbox/css-playground.html ... Don't mind the clock, but the 4th menu item is actually an <input/>

Eliran Malka Over a year ago

interesting, though it still poses some issues, e.g. what about keyboard navigation? this won't look too hot as in some engine implementations text is highlighted on keyboard focus to an input.

daleyjem Over a year ago

True. You could also use the method used on the actual <a> tags, which is... set the a:target {} selector in css, and make sure your href (minus the hash tag) matches the id of the <a> tag.

daleyjem Over a year ago

The url above is dead. Try this instead for an example: codepen.io/daleyjem/pen/PLBZXO

|

Eliran Malka · Accepted Answer · 2013-07-17 23:39:06Z

4

Try this (but once clicked, it is not reversible):

HTML:

<a id="test"><img src="normal-image.png"/></a>

CSS:

a#test {
    border: 0;
}
a#test:visited img, a#test:active img {
    background-image: url(clicked-image.png);
}

edited Jul 17, 2013 at 23:39

Eliran Malka

16.4k7 gold badges80 silver badges103 bronze badges

answered Jul 25, 2011 at 9:03

nfechner

17.6k7 gold badges48 silver badges64 bronze badges

Comments

jasalguero · Accepted Answer · 2011-07-25 09:14:17Z

2

You can use the different states of the link for different images example

You can also use the same image (css sprite) which combines all the different states and then just play with the padding and position to show only the one you want to display.

Another option would be using javascript to replace the image, that would give you more flexibility

answered Jul 25, 2011 at 9:14

jasalguero

4,1812 gold badges35 silver badges55 bronze badges

Comments

FK82 · Accepted Answer · 2011-07-25 09:00:14Z

1

No, you will need scripting to place a click Event handler on the Element that does what you want.

answered Jul 25, 2011 at 9:00

FK82

5,0754 gold badges34 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to change an image on click using CSS alone?

7 Answers 7

TL;DR!

A Pure CSS Solution

Abstract

Implementation

Demo

Refactoring

Implementation

Demo

References

5 Comments

2 Comments

1 Comment

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

TL;DR!

A Pure CSS Solution

Abstract

Implementation

Demo

Refactoring

Implementation

Demo

References

5 Comments

2 Comments

1 Comment

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related