0

Please take a look at this screenshot. It's the head part of the posts in my blog. See that the header image is covered by a black gradient. I created that using Photoshop because I don't know how to do it on CSS.

It's based on a wordpress theme.

enter image description here

Here's the code:

HTML/PHP

<?php if (has_post_thumbnail( $post->ID ) ): ?>
  <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
    <div class="post-title-container" style="background: url('<?php echo $image[0]; ?>') no-repeat center center;">
      <?php
        if ( is_single() ) :
          the_title( '<h1 class="post-title-text">', '</h1>' );
        else :
          the_title( sprintf( '<h2 class="post-title-text"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
        endif;
      ?>
    </div>
<?php endif; ?>

CSS

.post-title-container {
 position: relative;
 width: 100%;
 height: 300px;
 opacity: 1;
 box-shadow: none;
 background-size: 100% auto;
}

.post-title-text {
 color: #FFF !important;
 margin-bottom: 0;
 padding: 18% 10% 0% 10%;
 width: 80%;
 z-index: 1;
 line-height: 1.2;
 position: absolute;
 font-size: 4.14286rem;
}

.post-title-text > a {
 color: #FFF !important;
}

.post-title-text > a:hover {
 color: rgba(255, 255, 255, 0.8) !important;
}

Any ideas? Thanks.

Leandro Faria
  • 445
  • 2
  • 11
  • 25

1 Answers1

1

Unfortunately, there is no cross-browser support for doing a gradient mask yet. Here is a question that answers this: Using CSS, can you apply a gradient mask to fade to the background over text?

I would suggest creating a transparent PNG with a gradient of opacity from 100% to 0% that is the same size as the image and overlaying it. Otherwise, just stick to what you've got.

Community
  • 1
  • 1
Joshua Whitley
  • 1,196
  • 7
  • 21