images brightness/brillance/luminosity

Hi to the Gavick team,
your templates and suggestions are always a best have!
I need to ask your help for the brightness/brillance/luminosity of images that are showing in Writer themplate - portfolio style.
Like a photographer like I'm, I would like see a brightness/brillance/luminosity images in home page and in the "Featured Image" (the top image in each posts/pages).
Here is an example in my site that using your template:
- featured images in home page: http://www.wedding-photographer-in-italy.com
- featured image in a post: http://www.wedding-photographer-in-italy.com/love-story-engagements/photographic-excursion-rome-center-rimma-vladimir/
- the same image is on the post while you will browse down.
- and this is the image alone where you can see at the best of colors: https://lh6.googleusercontent.com/-jV0WH_EwsEo/Uc1X6gamALI/AAAAAAAADFw/_bVUKfTxWnY/w1280-h853-no/M_M_037.jpg

Is there a way that I can see the same image brillance in the top of posts and homepage?

Thanks for any help.

Hello,

Sure it's possible to remove it - it is added to make texts more readable. Please add the following code into Writer/css/override.css file, or use any custom css plugin (https://www.gavick.com/blog/adding-cust ... ress-theme)

Code: Select all

.single .entry-thumbnail:after,
.page .entry-thumbnail:after {
  display: none;
}

.portfolio-grid > .figure img.image-loaded {
opacity: 1;
}


Thanks for this.

I agree that it helps make the text more readable, but is there some way to dim only the lower part of the image on the posts (where the text is) rather than the entire image?

As an example, in the Photo theme, hovering over an image on a Gallery page makes a dark overlay only on the lower part of the image. Could some similar custom CSS be used here?

Just to clarify - I have used your CSS to make the Frontpage fully bright, which now looks great.

It's only on the posts I would like to use the dark overlay on the bottom part of the image where the post title appears (but not as a hover effect as in the example I gave!).

Hi,
This code is responsible for this effect:

Code: Select all

.single .entry-thumbnail:after,
.page .entry-thumbnail:after {
  content: " ";
  left: 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  background: rgba(0,0,0,0);
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.5)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  background: linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}


Please change left and top values into bottom and override existing code, you can also use a gradient generator:
http://www.colorzilla.com/gradient-editor/