Hover font color agency pro

[Ddspa]

Hi there,

I'm working on an Agency Pro theme and I would like to set up the home middle featured post as I can see the backstrach Image as a background in both the views (with and without the hover). I've managed to change the backgrounds, but now I see the text of the excerpt on the image background (image). I would like to set the font color of the excerpt to change with the hover, so I set transparent for the standard view and solve the problem, but I can't figure out how to do!!!

Please help 🙂

ps: Sorry but the site is on a local installation so I can't link it 🙁

[Steck Insights]

Hi there Ddspa,

I'm not quite sure I understand your problem. Hopefully, you've looked at the Agency Pro setup instructions already, as they may be helpful.

Just so I make sure I'm on the same page as you, let me repeat what I'm hearing: you've updated the featured images for the posts that are being pulled in by the Featured Posts Plugin that is placed within the Home Middle widget area, so you can see the featured image behind the text in the Home Middle widget area on the homepage (As described here). Is the problem that you are seeing the excerpt text even when you are not hovered over the post on the Home Middle widget area of the homepage? or that you only see it when hovering (which you want), but simply want to change the color of the excerpt text?

Let me know if I'm understanding your question correctly.

In case you are simply trying to change the color of the text on the excerpt, here is that solution:

1. Open the style.css stylesheet
2. Update the following rule (found on line #1247 by default), .agency-pro-home .content .featured-content .entry-content, to include color: #000000; (changing #000000 to reflect your desired color).

If you, indeed, wanted that text to change when hovered, you should add a rule after the aforementioned existing rule (line #1247) named: .agency-pro-home .content .featured-content .entry-content:hover

Let me know if I'm on the right trail or if I'm misunderstanding your intentions. We'll get this straightened out!

[Ddspa]

thanks for answering Steck,

the true problem is that I've a Featured Image with some transparency and I'll like to see the backstash image as background, but I see the excerpt instead through the image when not hovered; when hovered the text is showing as it should.
I've tried solving the problem changing the excerpt background to transparent and it worked, now I would like to change the excerpt text color to transparent as default and to black when hovering on, so the result is like the text appears only when hovered and I can see the background through the Featured Image.
Your suggestion worked for changing the text color but I does not change when hovered.

thanks again for your attention.

[Steck Insights]

Could you clarify what a "backstash image" is? That may be what's confusing in this conversation.

Could you also submit a link to your stylesheet? It's hard working "blind."

The Agency Pro theme is using the following CSS to adjust the image opacity on hover:

.home-middle .featuredpost img:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}

Because the image is absolutely positioned, it overlaps the text. When hovering over the image (which is also wrapped in a link), the image virtually disappears, allowing the text underneath to be seen.

Chances are, you may have applied the opacity attribute to the image (.home-middle .featuredpost img), so you're seeing the text underneath, regardless of whether it is being hovered over.

You'll want to make sure there is no opacity setting for the image unless it's being hovered over.

Without seeing your stylesheet code, it's going to be difficult to be sure about this. If you are able to upload the stylesheet to a server, or even share it via Dropbox or Google Drive, I should be able to figure this out.

Hopefully, I'm on the right trail.

[Ddspa]

Thank you again Steck for interesting,

The problem was that the image hovered is a .png with some transparency in the middle, and I would like to see the background through it, but I've give up this option 'cause the responsiveness will have troubles with it (there is no hove in the mobile view).

Thanks again for the help,
appreciating a lot.

[Steck Insights]

Ddspa, if you rethink your decision, you can set up rules in the responsive section of the stylesheet so that it display differently (not using the hover effect) on smaller displays. Let me know if you need help assigning responsive stylesheet rules. Best wishes!

[Author]

Posts