单击图像时如何在图像上显示刻度线和叠加层，但是当我单击其他图像时，它应该隐藏并在新图像上显示相同的图像？ [英] how to show tick mark and an overlay on image while clicking an image, but when i click other image it should hide and display the same on new image?
本文介绍了单击图像时如何在图像上显示刻度线和叠加层，但是当我单击其他图像时，它应该隐藏并在新图像上显示相同的图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< div class = grid -两个图像和文本
< figure>
< img src =资产/图像/painting.jpg class = img-缩略图>
< div class = caption>
< p> / p
< / div>
< div class = imageandtext image_grid>
< img src =资产/图像/摄影.jpg class = img-缩略图>
< div class = caption1>
< p>摄影< / p>
< / div>< / div>
< / figure>
< / div>
它应该显示如下图
现在它正在像这样工作
https://jsfiddle.net/liza_susan/ L8jyum77 /
解决方案
这是一个开始，为 cover 使用伪元素，标签和类型为收音机的输入
我将图像包裹在标签中，当单击时，它只是检查输入内容。
在CSS中，选中输入后， .image_grid input：checked + .caption :: after 规则将应用属性覆盖并显示选中标记。
.caption {位置：绝对；最高：0;左：5px； / *更改为匹配image_grid填充* /高度：100％;宽度：calc（100％-5px）; / *更改为匹配image_grid填充* /填充：0 10px;框大小：border-box；指针事件：无；}。caption p {display：inline-block;填充：10px;颜色：#fff;背景：rgba（0,0,0,0.5）;字体系列： Myriad Pro Regular；字体大小：15.31px;}。imageandtext {位置：相对；}。image_grid {display：inline-block; padding-left：5px;}。image_grid img {/ *添加了规则* / display：block;}。image_grid输入{display：none;}。image_grid input：checked + .caption {背景：rgba（0,0,0， 0.5）;}。image_grid输入：选中+ .caption ::之后{content：'✔';位置：绝对；最高：50％；左：50％；宽度：70像素；高度：70px；转换：translate（-50％，-50％）;白颜色; font-size：60px;行高：80px；文本对齐：居中；边框：2px纯白色； border-radius：50％;}
< div类= grid-two imageandtext> < div class = imageandtext image_grid> < label for = selimg1> < img src = http://yaitisme.com/images/getImage.jpg class = img-缩略图> < / label> <输入type = radio name = selimg id = selimg1> < div class = caption> < p>绘画< / p> < / div> < / div> < div class = imageandtext image_grid> < label for = selimg2> < img src = http://yaitisme.com/images/getImage.jpg class = img-缩略图> < / label> <输入type = radio name = selimg id = selimg2> < div class = caption> < p>摄影< / p> < / div> < / div>< / div>
基于注释，这是标题放置在标签，作为 span （作为标签只能将内联元素作为子元素）。
有了这个，不需要输入上的唯一ID，并且可以删除 属性，无需补偿在 image_grid 上设置的任何填充和/或边距。
堆栈片段
.caption {position：absolute;最高：0;左：0；高度：100％;宽度：100％;填充：0 0px;框大小：border-box；指针事件：无；}。caption span {display：inline-block;填充：10px;颜色：#fff;背景：rgba（0,0,0,0.5）;字体系列： Myriad Pro Regular；字体大小：15.31像素；}。image_grid {display：inline-block; padding-left：25px；}。image_grid标签{位置：相对； display：inline-block;}。image_grid img {display：block;}。image_grid input {display：none;}。image_grid input：checked + .caption {背景：rgba（0,0,0,0.5）;}。image_grid输入：选中+ .caption ::之后{内容：'✔';位置：绝对；最高：50％；左：50％；宽度：70像素；高度：70px；转换：translate（-50％，-50％）;白颜色; font-size：60px;行高：80px；文本对齐：居中；边框：2px纯白色； border-radius：50％;}
< div类= grid-two imageandtext> < div class = imageandtext image_grid> <标签> < img src = http://yaitisme.com/images/getImage.jpg class = img-缩略图> <输入type = radio name = selimg> < span class = caption> < span>绘画< / span> < / span> < / label> < / div> < div class = imageandtext image_grid> <标签> < img src = http://yaitisme.com/images/getImage.jpg class = img-缩略图> <输入type = radio name = selimg> < span class = caption> < span>绘画< / span> < / span> < / label> < / div>< / div>
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/
解决方案
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.
.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.
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>
这篇关于单击图像时如何在图像上显示刻度线和叠加层，但是当我单击其他图像时，它应该隐藏并在新图像上显示相同的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
