Rectangle 27 1

html How to make only background image transparent in responsive square grid?


.imgautumn1:before {
    background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/*  For responsive images as background */
.bg:before {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
    content:'';
    position:absolute;
    top:0;left:0;
    right:0;bottom:0;
}
:after
:before
top:0;left:0;     right:0;bottom:0;

@user2609980 you need to change the .bg to .bg:before as well. And keep a .bg{color:#fff} for the color as you did. The opacity must be applied to this newly created :before element. The updated fiddle shows this through the :hover rule, but you can apply it directly to the .bg:before if you want it to always have opacity:0.2

Ah wait I'll play with it some more, I only now see the ` .bg:hover:before{opacity:0.2;}` in the Fiddle! Thanks a lot for your help!

Aha, I was not doing it correctly then. Thanks! :-) */edit*/ I do not see where to place the opacity: 0.3 element? Changing the .imgautumn1 class to imgautumn1:before makes the image disappear.

The idea is that we create a pseudo-element with the :before that contains the image but is controlled autonomously. We then use position:absolute to remove it from the flow so that it does not affect this size of its container etc.. The left/top/right/bottom is to position this new element to cover the entire .bg element. It sets the dimensions of the :before element in effect.

You just need to make sure you apply the same background properties.

Note
Rectangle 27 1

html How to make only background image transparent in responsive square grid?


.imgautumn1:before {
    background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/*  For responsive images as background */
.bg:before {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
    content:'';
    position:absolute;
    top:0;left:0;
    right:0;bottom:0;
}
:after
:before
top:0;left:0;     right:0;bottom:0;

@user2609980 you need to change the .bg to .bg:before as well. And keep a .bg{color:#fff} for the color as you did. The opacity must be applied to this newly created :before element. The updated fiddle shows this through the :hover rule, but you can apply it directly to the .bg:before if you want it to always have opacity:0.2

Ah wait I'll play with it some more, I only now see the ` .bg:hover:before{opacity:0.2;}` in the Fiddle! Thanks a lot for your help!

Aha, I was not doing it correctly then. Thanks! :-) */edit*/ I do not see where to place the opacity: 0.3 element? Changing the .imgautumn1 class to imgautumn1:before makes the image disappear.

The idea is that we create a pseudo-element with the :before that contains the image but is controlled autonomously. We then use position:absolute to remove it from the flow so that it does not affect this size of its container etc.. The left/top/right/bottom is to position this new element to cover the entire .bg element. It sets the dimensions of the :before element in effect.

You just need to make sure you apply the same background properties.

Note