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

Question

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/

Duplicate of http://stackoverflow.com/questions/10422949/css-background-opacity . As an accepted answer with 200 upvotes says, you just cannot do that. — hon2a, Nov 23 '14 at 11:23

score 2 · Accepted Answer · answered Nov 23 '14 at 11:21

2

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/

answered Nov 23 '14 at 11:21

Gabriele Petrioli

191,379
34
261
317

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. – user2609980 Nov 23 '14 at 11:29
@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` – Gabriele Petrioli Nov 23 '14 at 11:30
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! – user2609980 Nov 23 '14 at 11:30
Great. It works like a charm! Where is `top:0;left:0; right:0;bottom:0;` good for? – user2609980 Nov 23 '14 at 11:35
1

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. – Gabriele Petrioli Nov 23 '14 at 11:42

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

1 Answers1