如何在单击图像时显示刻度线和图像上的叠加，但是当我点击其他图像时，它应该隐藏并在新图像上显示相同的图像？

Question

i want the image to be overlay-ed with any color and give a tick mark on it(As it is selected) allowing only one image at a time. while clicking other image it should hide the previous one and show tick and overlay on new image.

<div class="grid-two imageandtext">
                                    <figure>

                                        <img src="assets/images/painting.jpg" class="img-thumbnail">
                                        <div class="caption">
                                            <p>Painting</p>
                                        </div>                     
                                        <div class="imageandtext image_grid">
                                            <img src="assets/images/photography.jpg" class="img-thumbnail" >
                                            <div class="caption1">
                                                <p>Photography</p>
                                            </div></div>
                                        </figure>
                                    </div>

it should display like below image

now it is working like this

https://jsfiddle.net/liza_susan/L8jyum77/

Answer 1

Here is a start, using a pseudo element for the cover , a label and an input of type radio to take care of the selection.

I wrapped the image in a label, and when clicked, it simply checks the input.

In the CSS, when an input is checked, the .image_grid input:checked + .caption::after rule apply the properties to cover and show the check mark.

Updated fiddle

 .caption { position: absolute; top: 0; left: 5px; /* changed to match image_grid padding */ height: 100%; width: calc(100% - 5px); /* changed to match image_grid padding */ padding: 0 10px; box-sizing: border-box; pointer-events: none; } .caption p { display: inline-block; padding: 10px; color: #fff; background: rgba(0,0,0,0.5); font-family: 'Myriad Pro regular'; font-size: 15.31px; } .imageandtext { position: relative; } .image_grid { display: inline-block; padding-left: 5px; } .image_grid img { /* added rule */ display: block; } .image_grid input { display: none; } .image_grid input:checked + .caption { background: rgba(0,0,0,0.5); } .image_grid input:checked + .caption::after { content: '✔'; position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; transform: translate(-50%,-50%); color: white; font-size: 60px; line-height: 80px; text-align: center; border: 2px solid white; border-radius: 50%; } 

 <div class="grid-two imageandtext"> <div class="imageandtext image_grid"> <label for="selimg1"> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> </label> <input type="radio" name="selimg" id="selimg1"> <div class="caption"> <p>Painting</p> </div> </div> <div class="imageandtext image_grid"> <label for="selimg2"> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> </label> <input type="radio" name="selimg" id="selimg2"> <div class="caption"> <p>Photography</p> </div> </div> </div> 

---

Based on a comment, here is a version where the caption is positioned inside the label , as a span (as label can only have inline element as children).

With this one doesn't need unique id on the input and can drop the for attribute, and no need to compensate for any padding and/or margin set on the image_grid .

Updated fiddle

Stack snippet

 .caption { position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 0 10px; box-sizing: border-box; pointer-events: none; } .caption span { display: inline-block; padding: 10px; color: #fff; background: rgba(0,0,0,0.5); font-family: 'Myriad Pro regular'; font-size: 15.31px; } .image_grid { display: inline-block; padding-left: 25px; } .image_grid label { position: relative; display: inline-block; } .image_grid img { display: block; } .image_grid input { display: none; } .image_grid input:checked + .caption { background: rgba(0,0,0,0.5); } .image_grid input:checked + .caption::after { content: '✔'; position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; transform: translate(-50%,-50%); color: white; font-size: 60px; line-height: 80px; text-align: center; border: 2px solid white; border-radius: 50%; } 

 <div class="grid-two imageandtext"> <div class="imageandtext image_grid"> <label> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> <input type="radio" name="selimg"> <span class="caption"> <span>Painting</span> </span> </label> </div> <div class="imageandtext image_grid"> <label> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> <input type="radio" name="selimg"> <span class="caption"> <span>Painting</span> </span> </label> </div> </div> 

Answer 2

How about adding an image when someone hovers over it.

ie

.image-thumbnail:hover {
    background-image: <path to image>;
    background-repeat: no-repeat;
}

Answer 3

How about this JQuery function:

$('.image_grid').click(function() {
  $('.image_grid img:nth-of-type(2)').hide();
  $(this).children('img:nth-of-type(2)').show();
});

 $('.image_grid').click(function() { $('.image_grid img:nth-of-type(2)').hide(); $(this).children('img:nth-of-type(2)').show(); }); 

 .grid-two { width: 50%; display: inline; } .caption1 { position: absolute; top: -51px; left: 11px; width: 100%; color: #000; font-family: Myriad Pro regular; font-size: 15.31px; } .imageandtext { position: relative; } .image_grid { display: inline; padding-left: 5px; } .absolute { border: 1px solid black; position: absolute; left: 0px; display: none; width: 50%; margin: 25%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="grid-two imageandtext"> <figure> <div class="imageandtext image_grid"> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> <div class="caption1"> <p>Painting</p> </div> <img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute"> </div> <div class="imageandtext image_grid"> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> <div class="caption1"> <p>Photography</p> </div> <img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute"> </div> </figure> </div> 

JSFiddle