Image over an image using a class (CSS) - html

Question

The problem I have here is because we use a theme (wordpress) for our clients that makes it easy for them to change an image and this is a simple version of the code it produces:
<div class="row">
<div class="column">
<img class="image" src="image user can change">
</div>
</div>
What I need to try and achieve is a layer over the top of the image to put a logo on the image without changing the core HTML that the theme produces and only using CSS.
My thought was adding a background image to the class column and somehow bringing it in front. I tried z-index on the column with no luck. Any ideas?

Answer 1

You can use pseudo-elements to achieve what you are after. Try using something like the following code:
.column {
position:relative;
}
.column:after {
content:"";
position:absolute;
z-index:2;
background:url(your-image.jpg);
}
.column img {
position:relative;
z-index:1;
}
Here is an example fiddle:
https://jsfiddle.net/scooterlord/cqhf2gw4/

Answer 2

I think you could take advantage of the :after selector in your column class. Something like this:
.column {
position: relative;
}
.column:after {
content: "";
position: absolute;
width: 30px;
height: 30px;
bottom: 10px;
right: 10px;
background-image: url('path/to/logo.png');
}
That would position a small logo in the bottom right.

Answer 3

Add new class .overlay add the img logo path, give the parent position:absolute;
.image {
height: 200px;
max-width: 100%;
}
.overlay{
position:absolute;
/*positioning here*/
}
.overlay img{
height: 30px;
}
<div class="row">
<div class="column">
<div class="overlay"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></div>
<img class="image" src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline">
</div>
</div>