Make a thumbnail image large when clicked using html/css3 only


I want to make an image larger on click/double click the thumbnail and then when i hover that real image it should zoom... till now i can hover a thumbnail and it showsthe real image but i want to use click (to display) and then hover the real image...i dont want to use js, isn't there any property in css3 which could help?

here is my code for this

<li><a class="thumbnail" href="#">
                                            <img src="graphics/blue1.jpg" alt= "" width="100" height="150" />
                                            <span><img src="graphics/blue1.jpg"/><br /></span></a>

                                            <li><a class="thumbnail" href="#">
                                            <img src="graphics/blue2.jpg" alt="" width="100" height="150" />
                                            <span><img src="graphics/blue2.jpg" /></span></a>
                                            <a class="thumbnail" href="#"><img src="graphics/blue3.jpg" alt="" width="100" height="150" />
                                            <span><img src="graphics/blue3.jpg"/><br /></span></a>


here is css for these thumbnails

 section li {

position: relative;
z-index: 0;

background-color: transparent;
z-index: 50;

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;

.thumbnail span img{ 
border-width: 0;
padding: 1px;

.thumbnail:hover span{ 
visibility: visible;
top: 10px;
left: 120px; 

also on the mouse hover the hover image goes down instead of coming infront in front..

Problem courtesy of: user2989588


To Trigger click events in css, you should do the following: encapsulate your image in <a>

<a href="#ImgToDisplay"><img id="imageToBeClickedOn"/></a>

<img id="ImgToDisplay"></img>

Set ImgToDisplay on hide by default and add the following in your css:

//set your image to visible here.

Moreover to enlarge ImgToDisplay on hover, just:

//enlarge your image here
Solution courtesy of: Wasiq Ali


Try this example,


<img src="graphics/blue1.jpg" id="imgs" onclick="zoom()" alt= "" width="100" height="150" />


function zoom(){
    var NAME = document.getElementById("imgs");

    if (menu == 1) {

        menu = 0;
            {'width': '150px','height':'250px'},150

    } else {
            {'width': '100px','height':'150px'},150
Discussion courtesy of: Gopal Joshi

That's not really possible with CSS. You can use the :active pseudo element to possible some of what you want, but, if you try that out, you'll quickly see why it doesn't work.

You'll need to use JavaScript or jQuery to accomplish it.

Discussion courtesy of: David

This recipe can be found in it's original form on Stack Over Flow.