Problem with content overlaying header image when scrolling down front page


Screenshot here:

Thanks for help!



I open the home page of your site, and there is no “About Use” section appears. Is this happen when you activate the customizer?


Also in the site.
You can check now.
This is not how the Demo behaves.
The content below the header image should not overlay the image.


Checked, and now I can see “latest post”, “live jazz lounge”, “service”, etc…
All displayed as well.

Did you already fix this?


Yeah… it was quite a struggle, but I think I managed.

The problem I am struggling now is with some hover changes.

  1. Opacity changes for all the posts in the widget at the same time as soon as the mouse enters the whole area. That’s not good. It should change only on the image you are hovering on and only when the mouse is on top of it. Also, I don’t understand why the widget title has to also change when I hover over some item.

  2. Hovering over post dates or the “Posted on” text makes them disappear. (Hover color changes to white, just like the background). I can change to hovering color to yellow #f2d25b under Customize/Colors/Primary color but that also changes the color of the animated text and secondary button in the header. Aaarrggghhh! I like the yellow hover color but I don’t want any yellow in the front page.

Thanks for helping. I can post this separately if you want.



The color of ALL the post titles featured in the widget also change at the same time. Actually EVERYTHING in the widget changes as soon as you hover the mouse anywhere.

It should be post-specific. Only the post that you hover over should change. Not all of them.




Also here:

  1. please check you css code then change this code:
.hentry:hover .entry-image img {
    opacity: 0.6;

with this: .entry-image {
    opacity: 0.6;
  1. please add this css code:
.entry-info .posted-on:hover, .entry-info a:hover {
    color: #f2d25b;


Child theme?




This code is not in the Child theme but in the parent:

.hentry:hover .entry-image img {
opacity: 0.6;

Should I delete it from the parent?


Oh… No, please dont remove anything in parent theme.
You can replace it from child theme.

Just put the code in above in child theme.


Now is really weird (see latest posts widget below front page):

  1. When the mouse enters the whole Latest Post area, all opacity changes for ALL posts. Then on top of that, opacity changes AGAIN when the mouse hovers over an individual post. Not good.

  2. When the mouse enters the whole Latest Post area, post titles disappear all together (turn white). Then individual post titles turn yellow upon hovering. Not good either.

I think we need to find a way to cancel the response of the whole widget to the hovering. Only the individual posts should respond.




Oh right… now you have to unset the original hover effect from the parent theme. try this:

.hentry:hover .entry-image img {
    opacity: unset;

and for the title, use this:

.hentry:hover .entry-title {
    color: #f2d25b;


No luck. Nothing happened.


hmmm… how about this:

.hentry h5.entry-title, .hentry:hover h5.entry-title {
    color: #F2D25A !important;


Now titles are permanently yellow. No hover change.
Also, opacity still changes in ALL posts at the same time.
I think the unset function did not work.


The key thing is that nothing should happen when the mouse enter the overall widget area. That has to be eliminated.


Oh sorry, I just noticed that you also want the title is always has yellow color.

you can try this code to remove the hover effect for the title when mouse hovering in all post:

.hentry:hover h5.entry-title {
    color: #000;

and to change the title color when the individual post is hovered, try this: h5.entry-title {
    color: #f2d25b;

The unset in opacity is working well here. maybe you need to hard refresh your browser to see the changes.


Good! Thanks!

Now it’s just the opacity problem.
Still all post change at the same time.