Instead of images, I want to place colors in those spots.
https://jsfiddle.net/rza8v51x/
The images are set in a grid layout, and I want to remove them and add colors.
In place of the images I want to add colors in those spots.
That is all I am trying to do in the code.
Replace the images with colors.
How would this be done?
.channel-browser__channels {
border-top: 1px solid rgba(86,95,115,0.5);
padding-top: 14px;
margin-top: 24px;
}
.channel-browser__channel-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.channel-browser__channel-grid-item {
position: relative;
}
.content-item-container--aspect-square .horizontal-content-browser__content-item{
padding-top: 100%;
}
.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image, .horizontal-content-browser__content-item .responsive-image-component {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
border-radius: 4px;
background-color: #1a1a1a;
background-color:red;
-webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}
.channel-browser__channels {
border-top: 1px solid rgba(86,95,115,0.5);
padding-top: 14px;
margin-top: 24px;
}
.channel-browser__channel-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.channel-browser__channel-grid-item {
position: relative;
}
.content-item-container--aspect-square .horizontal-content-browser__content-item{
padding-top: 100%;
}
.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image, .horizontal-content-browser__content-item .responsive-image-component {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
border-radius: 4px;
background-color: #1a1a1a;
background-color:red;
-webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}<div >
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
</div>CodePudding user response：
Delete the entire img tag in between the div tags, and either add a class as I did in the div tags "box-color-red" or what ever you desire to call the class, and style the background: toWhateverColorYouWant; || OR you can delete the text inside the div class and just create your own if you do not need all of those classes that are declared inside of your div classes. Otherwise, keep them, and appropriately name a new class that will style the color of the div, and make sure the spacing inside the class name is space correctly as well.
.channel-browser__channels {
border-top: 1px solid rgba(86,95,115,0.5);
padding-top: 14px;
margin-top: 24px;
}
.channel-browser__channel-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.channel-browser__channel-grid-item {
position: relative;
}
.content-item-container--aspect-square .horizontal-content-browser__content-item{
padding-top: 100%;
}
.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image, .horizontal-content-browser__content-item .responsive-image-component {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
border-radius: 4px;
background-color: #1a1a1a;
background-color:red;
-webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}
.box-color-red {
background: red;
}
.box-color-blue {
background: blue;
}
.box-color-yellow {
background: yellow;
}
.box-color-green {
background: green;
}<div >
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x" ></div>
</div>CodePudding user response：
This might get you on the right track, but your grid is a mess
.channel-browser__channels {
border-top: 1px solid rgba(86, 95, 115, 0.5);
padding-top: 14px;
margin-top: 24px;
}
.channel-browser__channel-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.channel-browser__channel-grid-item {
position: relative;
}
.horizontal-content-browser__content-item {
padding-top: 100%;
}
.content-item--channel {
height: 280px;
}
.responsive-image-component {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
border-radius: 4px;
background-color: #1a1a1a;
background-color: red;
}
.content-item--channel::after {
content: '';
display: block;
position: absolute;
bottom: 20px;
width: 100%;
aspect-ratio: 1;
background-color: black;
}<div >
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x"
></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x"
></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x"
></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x"
></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x"
></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x"
></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x"
></div>
<div >
<img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&quality=100 3x"
></div>
</div>CodePudding user response：
Perhaps a quick solution to add a overlay color for the images without changing the HTML code would be adding a ::after to the grid item.
/*