Appear image on click

  • Hey,

    I have this code that make the image appear when I hover the text it is targeting.
    However, since it doesn’t work with touch screen devices, I wanted to simply click on the link and make the image appear (and stay visible).

    This is the code a I have:

    .share-project-box { position:relative; display:inline-block; }
    .share-project-box ul { display:none; position:absolute; left:100%; top:-7px; margin:0 0 0px 0px !important; min-width:200px;}
    .share-project-box ul li { display: inline-block; list-style: outside none none; margin: 0px 0px 0px 10px ; width: 36px; }
    .share-project-box:hover ul { display:block; }
    .share-project-box:hover { text-decoration:underline; }
    .share-project-box > h6 { margin:0px; }

    I tried to search about it and the suggestions were to put :target but it is not working.
    Can anyone help me?
    It must be simple but I am a newbie on this :\

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    You need :target { display: block; }
    but it will only work if the target image has an ID attribute and the link clicked on has an ID skip link for the href attribute.

    <a href="#my_image">Show Image</a>
<img src="image-currently-hidden.jpg" id="my_image" class="share-project-box" />

    visit my site

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Appear image on click’ is closed to new replies.