Venture Theme Photos are too dark

• 

  helixandfog · Member · Apr 20, 2016 at 7:22 pm

  • Copy link
  • Add topic to favorites

  All of the photos on the venture theme have a shaded/veiling on them. This means my photos appear darker than the originals. I want for the shading to only appear when hovering over the photos in order to select them – instead of being dark all the time. How can I do this?

• 

  thesacredpath · Member · Apr 21, 2016 at 1:33 am

  • Copy link

  Hi there, I assume you are talking about https://armworx.com, correct? The following I think is what you are looking for. I’ve got it at 0 in the code below, but if you want a bit of a tint to the photos, you can use something like 0.2 or something. At 0 it is fully transparent.

  .has-background-cover .overlay {
      opacity: 0;
  }

• 

  helixandfog · Member · Apr 23, 2016 at 7:58 pm

  • Copy link

  Perfect! I’d like to do the same for my portfolio section. The photos, as displayed on the homepage, have a dark overlay.

• 

  helixandfog · Member · Apr 23, 2016 at 8:03 pm

  • Copy link

  I figured that one out. Please disregard the request directly above.

  Now that I managed to lighten the portfolio images, the text above it needs to be black (it is currently white so it is no longer as visible).

  May I have code to blacken only the text for my portfolio photos?

• 

  helixandfog · Member · Apr 23, 2016 at 8:05 pm

  • Copy link

  I’d also like for those titles to orient on the bottom of the photos, rather than be vertically centered.

• 

  thesacredpath · Member · Apr 25, 2016 at 6:47 pm

  • Copy link

  Hi, right now you have this CSS in your custom CSS, which is preventing the portfolio items from showing as links, and also preventing the titles from showing.

  .portfolio-grid .hentry a {
      cursor: default;
      pointer-events: none;
  }

  With pointer-events commented out on your site, give this a try.

  .portfolio-grid .hentry .entry-header .entry-title {
      transition: color 0.2s ease-in-out 0s;
  	visibility: hidden;
  	top: 50%;
  }
  .portfolio-grid .hentry:hover .entry-header a {
      background: rgba(0, 0, 0, 0.1);
  }
  .portfolio-grid .hentry .entry-header a {
      background: rgba(0, 0, 0, 0.1);
      opacity: 1;
  }
  .portfolio-grid .hentry:hover .entry-header .entry-title {
      bottom: 0;
      color: #000;
      opacity: 1;
      top: auto;
      visibility: visible;
  }

  Some of the CSS rules above are already in your custom CSS, so you can either edit those or remove them.

• 

  helixandfog · Member · Apr 28, 2016 at 6:16 pm

  • Copy link

  Thanks very much. I’d now like to keep the titles visible without having to hover over the images.

• 

  thesacredpath · Member · Apr 28, 2016 at 8:17 pm

  • Copy link

  Add the following to the very bottom of your custom CSS to make the titles appear all the time.

  .portfolio-grid .hentry .entry-header .entry-title {
      visibility: visible;
      top: auto;
      bottom: 0;
      color: #000;
  }