Thumbnail would already be the right choice for the image format. There, 150×150 pixels is normally set – fits your requirement. If this does not apply to you, then your theme may have set its own values for this. You should be able to adjust these in the theme.
To influence the images when the mouse is touched, you could store the following in Customizer > Additional CSS:
a:hover > img {
opacity: 0.8;
}
This will make them slightly transparent. Or you can use this to create a light grey veil over the image:
.wp-block-image a:hover:before {
content: "";
display: block;
position: absolute;
right: 0;
left: 0;
bottom: 0;
top: 0;
z-index: 1;
background-color: rgba(0,0,0.2);
}
Thanks @threadi Really good of you to reply.
Your first code works great to brighten the link pics.
The second code works, but it makes the whole pic black, including the text. I was wanting something to darken the pic a little so that the text would be better seen. Do you have a revised version of this code?
As for the square pics, yes, I understand that 150×150 thumbnails are the right size. But for some reason they are all blurred. Any idea why this might be?
There is a spelling mistake in the second code. Wrong is:
background-color: rgba(0,0,0.2);
Correct is:
background-color: rgba(0,0,0,0.2);
Then it is not completely black. I find it striking that it only works with the one picture. The others have no links around them. Is that intentional? Otherwise you could also use the following:
.wp-block-image:hover:before {
content: "";
display: block;
position: absolute;
right: 0;
left: 0;
bottom: 0;
top: 0;
z-index: 1;
background-color: rgba(0,0,0.2);
}
In your case, the images are currently output as original and reduced by CSS. If you would change this to thumbnail (and thus 150x150px), one could see what you mean in this respect.
Hello @threadi
Many thanks for your help last week. I wanted to complete that Gallery Page before I got back to you. It’s now here.
https://brightmorningstar.org/mysteries/
What you suggested is working now. But while it greys the img a bit, it also greys the text. My ideal would be a bit more like this page: https://zeihan.com/know-your-world/
Of course, it doesn’t have to be exactly the same.
But I’d like a piece of code that…
(1) Darkens the lower fifth or quarter of the img
(2) Makes the text stand out brightly on the darkened background.
(3) Makes a one or two px blue or purple frame round the pic on hover.
(4) Best of all, if the text could appear only on hover, and disappear after.
Any pointers would be much appreciated.
