.dgwt-wcas-sf-wrapp { opacity: 0; font-size: 0; line-height: 0; }
.dgwt-wcas-ico-magnifier { opacity: 1; }
.dgwt-wcas-search-input { opacity: 1; font-size: 16px; line-height: 1; }
.dgwt-wcas-sf-wrapp { color: transparent; font-size: 0; line-height: 0; }
.dgwt-wcas-ico-magnifier { color: black; }
.dgwt-wcas-search-input { color: black; font-size: 16px; line-height: 1; }
-<input type="radio" id="img1" name="images" checked>
<label for="img1">
+ <input type="radio" id="img1" name="images" checked>
<span>Image1</span>
<i class="fa fa-sort-desc" aria-hidden="true"></i>
<img src="..." alt="Img1">
</label>
label{
cursor: pointer;
width: 100%;
+ display:flex;
+ align-items:center;
+ flex-wrap: wrap;
}
.fa{
- float: right;
+ margin-left: auto;
}
.element {
/* width: calc(33.3% - 20px); */
width: calc((100% - 20px * 2) / 3);
height: 50px;
background: black;
}
.container {
width: 500px;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
border: 1px solid green;
}
.element {
height: 50px;
background: black;
}
<div class="block">
<img src="..." onload="this.classList.add('loaded')">
<span>Текст поверх картинки</span>
</div>
.block {
position: relative;
}
.block span {
position: absolute;
display: none;
}
.block img.loaded + span {
display: block;
}