Home/ Questions/Q 8941469
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T11:18:34+00:00

I have an image in the front and a text at the back. I

  • 0

I have an image in the front and a text at the back. I want to make the text selectable while the image still being in the front. How can I achieve this ?
Link to jsfiddle is http://jsfiddle.net/G5BeU/

Sample code 

<html><head><style type="text/css">@media print {  .gmnoprint {    display:none  }}@media screen {  .gmnoscreen {    display:none  }}</style>
    <title>Google Maps JavaScript API v3 Example: Custom StreetView</title>
    <meta charset="utf-8">
<style>
#parent-street-view{position:relative}
#map_canvas{position:absolute !important;width: 500px; height: 400px; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);z-index:0}
#parent-street-view .overlay-pollution{width: 500px; height: 400px;position:absolute;z-index:100; }
</style>
  </head>
  <body>
    <div id="parent-street-view">
        <div id="map_canvas" >This is supposed to be visible and selectable</div>
        <img class="overlay-pollution" src="http://www.mickeys.net/assets/images/default/transparent.png" />
    </div>

    <!--<canvas id="canvas" width="500px" height="500px" style="position:absolute;top:500px;"></canvas>-->
</body></html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Simple, set the pointer-events CSS property of the image to none. This will allow you to select the text behind.

    You might also want to lower the opacity on the image, so you can partially see the text.

    #parent-street-view .overlay-pollution {
    width: 500px;
    height: 400px;
    position: absolute;
    z-index: 100;
    opacity: 0.5;
    pointer-events:none;
}

    Here is a demonstration: http://jsfiddle.net/G5BeU/2/

    • 0