Reveal text within transparent overlay

Question

I've an image, and I'm making it transparent on click, so it reveals the background, Making the illusion of an overlay.

I'd like to also show some text in the center of the background, so it appears when the background reveals, how to do it?

Expected:

Codepen:

https://codepen.io/ogonzales/pen/yLJGzYr

Code:

$('.tricky').click(function(){
    $('img').addClass("tricky_image");
});

UPDATE 1:

Codepen multiple images in grid

https://codepen.io/ogonzales/pen/qBNLLoW

Answer 1

This should work. If you have any questions, please let me know. You can also add a border if you want to match the reference image better.

 $('.imageDiv').click(function(){ $('img').addClass("tricky_image"); $(".text").css("display", "inline"); });

 .imageContainer { position: relative; text-align: center; color: black; max-width: 200px; max-height: 200px; }.tricky_image { -moz-transition: all 1s; -webkit-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0.5; filter: alpha(opacity=20); }.text { display: none; position: absolute; top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="imageContainer"> <div class='imageDiv' id = 'test'> <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" /> </div> <div class="text">text here</div> </div>

Updated answer:

The key thing here is remembering how the DOM works. you had $('.imageDiv').click(function() {... which will only allow you to find the children of the image div, which the text class is not part of. I switched it to ('.imageContainer') which can traverse the DOM properly to find text as it is a child of imageContainer . Also $(this).find(".text").toggleClass("display-inline"); does not work because display-inline is not a class. I created a new class called addText which now hold the properties text had before where text now serves to hide the text until needed. Let me know in the comments if this works for you.

 $('.imageContainer').click(function() { $(this).find('img').toggleClass("tricky_image"); $(this).find('.text').toggleClass("addText"); });

 .grid { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: center; grid-gap: 15px; }.flip-card { border-style: hidden; background-color: transparent; width: 120px; height: 120px; perspective: 1000px; }.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }.flip-card:hover.flip-card-inner { transform: rotateY(180deg); }.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }.flip-card-front { background-color: #bbb; color: black; }.flip-card-back { background-color: #222e36ef; color: white; transform: rotateY(180deg); } /* background overlay - text */.imageContainer { position: relative; text-align: center; color: black; max-width: 200px; max-height: 200px; }.tricky_image { -moz-transition: all 1s; -webkit-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0.5; filter: alpha(opacity=20); }.text { display: none; }.addText{ display: inline; position: absolute; top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%); } @media(max-width: 768px) {.grid { grid-template-columns: repeat(3, 1fr); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-8"> <section id="team"> <div class="container"> <div class="grid"> <div class="imageContainer"> <div class='imageDiv' id='test'> <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" /> </div> <div class="text">text here</div> </div> <div class="imageContainer"> <div class='imageDiv' id='test'> <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" /> </div> <div class="text">text here</div> </div> <div class="imageContainer"> <div class='imageDiv' id='test'> <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" /> </div> <div class="text">text here</div> </div> <div class="imageContainer"> <div class='imageDiv' id='test'> <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" /> </div> <div class="text">text here</div> </div> <div class="imageContainer"> <div class='imageDiv' id='test'> <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" /> </div> <div class="text">text here</div> </div> <div class="imageContainer"> <div class='imageDiv' id='test'> <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" /> </div> <div class="text">text here</div> </div> <div class="imageContainer"> <div class='imageDiv' id='test'> <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" /> </div> <div class="text">text here</div> </div> <div class="imageContainer"> <div class='imageDiv' id='test'> <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" /> </div> <div class="text">text here</div> </div> </div> </div> </section> </div>