Hello, 2017! and the opacity conundrum

Happy New Year, all! I know it has been a few months since my last post. Life, unfortunately, caught up with me and now I am in school for my post-graduate studies. This means for the next two years or so, not much will be happening other than working full-time AND studying full-time. I’m hoping to squeeze in some web developing and other fun things here and there but I’m not making any promises. Right now, I’m days away from the start of another school term and I thought I would tinker with HTML and CSS just to keep my skills up and maybe dip my fingers into some responsive web design and PHP as well.

Right now, I’m working on a practice project for funsies in an effort to revamp my website in the future to include a shop as well as a more user-lovable gallery and slideshow. I have run into a bit of a conundrum, however. Under the “recent posts” section, I wanted to make the feature image into a sort of background where the title would be floating over it. I opted to use the “featured image” as the background image for the <div> the post title will be in and set the opacity to 0.5 (half). Unfortunately, all the child elements progressively become transparent as well. Apparently, this is one of the issues that the powers that be are working on at the moment. For now, my options are to create a <div> for the image with an overlay on top of it, or edit the image to change its opacity before uploading it into the <div>. The latter option will be tricky since the featured image is only transparent in the main page but not in the blog post.

We will have to wait and see what happens.

Quick update: I used the feature image AND an overlay with an opacity of 0.5 pre-edited in photoshop for the background, set the background-blend-mode to screen, opacity remains default (opacity: 1;) and this happened:

It’s a great option for when the background image will be changing depending on the feature image for the recent blog post. Now I’m off to do the happy dance!