2

I have an image(1st) and text on the image.I have used some codes to change the 1st image to 2nd image after clicking it and return back to orignal image after clicking on the 2nd image again.

The position of the 2 images and the text in the div are positioned in such a way that the text comes on the image.

Now the problem is when I click on the image to get other image the text disappears. Is there any way I can keep the text always visible no matter which image it is using only html and css?. I cant change the position of the image also. It has to be in that position. Is there any other way to keep that text in that position without using div?

CSS:

.checkbox { display: none; }
.label {
    display: inline-block;
    width: 441px;
    height: 243px;
    left:289px;
    top:629px;
    position:absolute;
    background: url(images/first.png);
    }
.checkbox:checked + .label {                
    width: 471px;
    height: 277px;
    left:268px;
    top:611px;
    position:absolute;
    background: url(images/second.png);
    }
.text {
    width:352px;
    height:183px;
    left:324px;
    top:664px;
    position:absolute;      
    }

HTML:

<div class="text">
    <p> some text</p>
</div>    
<input type="checkbox" class="checkbox" id="checked"/>
<label class="label" for="checked" ></label>
Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
Nikhil Bharadwaj
  • 867
  • 4
  • 24
  • 42
  • I did not understand your question. If you want the text to always appear 'above' the image use `z-index:2` for text and `z-index:1` for the images – odedta May 03 '15 at 10:44
  • Post your HTML code as well. – m4n0 May 03 '15 at 11:16
  • Absolute positing is a poor layout method...there are much better and more flexible layout methods [**LearnLayout.com**](http://learnlayout.com/). Absolute positioning should only be used sparingly and for **specific** effects, – Paulie_D May 03 '15 at 11:20

2 Answers2

0

I don't feel this is the best way to switch between images but you can try setting the z-index property for the text:

.text
{
  width:352px;
  height:183px;
  left:324px;
  top:664px;
  position:absolute;
  z-index: 10;
}
m4n0
  • 29,823
  • 27
  • 76
  • 89
0

just change the order of the html. If you want the text always visible the text container should be place after the other elements

<input type="checkbox" class="checkbox" id="checked"/>
<label class="label" for="checked" ></label>  

<div class="text">
    <p> some text</p>
</div>

That's imo the best way to avoid the use of z-index Which you should use if you can't change the html.

Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
  • But the problem here is when I calick on the div part of the text which in on image,the image doesnt get changed.Ill have to click outside the div part of the text.What will be solution for it? – Nikhil Bharadwaj May 04 '15 at 04:37
  • http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements – Alvaro Menéndez May 04 '15 at 07:41