0

I am trying to modify the z-index of the http://tympanus.net/Development/ScatteredPolaroidsGallery/ . The demo I am refering to is in the third / final example shown.

When the polaroid is flipped I am unable to select the text in chrome or Safari, but I can in firefox.

Chrome and Firefox enter image description here

I just need a way to be able to select the text in chrome/safari. This way I can then be able to add hyperlinks and call to action buttons that are currently hidden behind the z-index.

The div in question is 'photostack-back'

HTML

<section id="photostack-1" class="photostack photostack-start">
<div>
    <!-- Polaroid with backside -->
    <figure>
        <a href="http://goo.gl/fhwlSP" class="photostack-img">
            <img src="img/2.jpg" alt="img02"/>
        </a>
        <figcaption>
            <h2 class="photostack-title">Happy Days</h2>
            <!-- optional backside -->
            <div class="photostack-back">
                <p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
            </div>
        </figcaption>
    </figure>
   </div>
</section

CSS

.photostack-back {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
font-family: "Give You Glory", cursive;
color: #a7a0a2;
padding: 50px 40px;
text-align: left;
font-size: 22px;
line-height: 1.25;
z-index: 1;
}

Here is the tutorial Scattered Polaroids Gallery

M1lls
  • 545
  • 3
  • 11
  • 33

1 Answers1

0

I figured out that this was not a z-index issue but a backface-visibility issue.

I used veinjs to inject the following code in photostack.js

vein.inject('figure', {'backface-visibility' : 'visible !important'});

and the css

figcaption {
backface-visibility: hidden;
}
M1lls
  • 545
  • 3
  • 11
  • 33