javascript - how to show tick mark and an overlay on image while clicking an image, but when i click other image it should hide

admin管理员组

文章数量:1324847

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

/

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/liza_susan/L8jyum77/

• javascript
• html
• twitter-bootstrap
• css

Share Improve this question Follow edited Jun 7, 2017 at 8:47 liza asked Jun 7, 2017 at 8:09 lizaliza 49422 gold badges66 silver badges2121 bronze badges 6

• 1 First of all, wele to Stack Overflow. You are expected to create a Minimal, Complete, and Verifiable example when asking a question. – James Douglas Commented Jun 7, 2017 at 8:16
• i added a jsfiddle, please excuse the style, i need to show one image as selected. – liza Commented Jun 7, 2017 at 8:30
• Your link is dead :( – Angela Amarapala Commented Jun 7, 2017 at 8:31
• jsfiddle/liza_susan/2jwc4dph – liza Commented Jun 7, 2017 at 8:40
• sorry please check this one jsfiddle/liza_susan/L8jyum77 – liza Commented Jun 7, 2017 at 8:45

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

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./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./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 ment, 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 pensate 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./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./images/getImage.jpg" class="img-thumbnail">
      <input type="radio" name="selimg">
      <span class="caption">
        <span>Painting</span>
      </span>
    </label>
  </div>

</div>

How about adding an image when someone hovers over it.

i.e.

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

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./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./images/getImage.jpg" class="img-thumbnail">
      <div class="caption1">
        <p>Painting</p>
      </div>
      <img src="https://i.sstatic/Kg1Do.png" class="absolute">
    </div>
    <div class="imageandtext image_grid">
      <img src="http://yaitisme./images/getImage.jpg" class="img-thumbnail">
      <div class="caption1">
        <p>Photography</p>
      </div>
      <img src="https://i.sstatic/Kg1Do.png" class="absolute">
    </div>
  </figure>
</div>

JSFiddle

本文标签：