Archived topic
How would I achieve this effect? I think it's a Z-Index Featured Image?
3 replies · Started by Henry on April 19, 2022
https://www.screencast.com/t/n8CI174V4
I am trying to achieve this blog post layout, I guess I have two questions here...
1. To get the image to overlap the header I am thinking the best approach is to use an element as a header, and then apply the actual Featured Image in the post to overlap the header. Would this be done using a -200px CSS height variable? Or something like that?
2. To get the header a static color can this be done using a custom field on the actual post that would load dynamically on the backend for the element? If you see what I mean!
Hope not too complicated and thanks for all help on this.
I don't have a working demo - was interested to hear your approach before trying to build it out....
Thanks
Hi Henry,
1. Yes, you can achieve such through utilizing a negative margin for the image. Here’s a quick mock up of a sample I made on my test site:
https://share.getcloudapp.com/DOu4PZRO
https://share.getcloudapp.com/DOu4PZRO
2. Yes, you could probably create a custom field, then retrieve the value, and manually set the background image color of the Container Block through Javascript.
You could probably try something like:
<script>
var $holder = document.getElementsByClassName('change-color');
if($holder){
for(var i = 0; i < $holder.length; i++){
$holder[i].style.backgroundColor = "<?php the_field('setcolor'); ?>";
}
}
</script>The class name of my Container Block is change-color and the custom field slug is setcolor.
Hope this helps! :)
Thanks Fernando!
1. "utilizing a negative margin for the image" > I'll test that out....
2. With the PHP command: <?php the_field('setcolor'); ?> would this be done using ACF (Advanced Custom Fields)
- Henry
Yes, I tested the code out with ACF. :)
