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

background, css, html, image, opacity

Solution

Seems to work fine if you use the `:after`/`:before` solution (setting the image as the background)

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

.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;
}

Demo at http://jsfiddle.net/L7m5psrm/2/

Problem

Using web-tiki's responsive square grid lay-out's I have made some responsive squares with background images and text on it as follows: HTML: ``` <div class="square bg imgautumn1"> <div class="content"> <div class="table"> <div class="table-cell months"> VISIBLE TEXT </div> </div> </div> </div> ``` CSS: ``` .square { float: left; position: relative; margin: 0.25%; width: 50%; padding-bottom : 50%; /* = width for a 1:1 aspect ratio */ background-color: #1E1E1E; overflow: hidden; } .content { position: absolute; height: 90%; /* = 100% - 2*5% padding */ width: 90%; /* = 100% - 2*5% padding */ padding: 5%; } .table { display: table; width: 100%; height: 100%; } .table-cell { display: table-cell; vertical-align: middle; } .months { font-size: 40px; font-weight: 900; } .imgautumn1:before { background-color: black; } /* 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; } .bg{color: #fff;} /*CHANGE OPACITY ON HOVER*/ .bg:hover:before{opacity:0.2;} ``` Now I am trying to only make the background transparent, not the text. While using the `opacity: 0.3` property on the `imgautumn1` CSS-class the image becomes transparent, but also the text in it. Other techniques like the one from this SO-answer with using a separate div for the background, or a technique with using the `:after` element from here for the background plus opacity make the positioning of the background go wrong (i.e., image not centred) and I find it hard to implement. Another possibility might be to place a transparent div square on top of the image, but I don't think that is possible with the `background-image` property. I hope someone here can provide me with some help on how to only make the background transparent and not the text. JSFiddle: http://jsfiddle.net/L7m5psrm/

Original source

Related problems