image overlay on image not working in wordpress, but works in "normal html editors"

i've got a series of photos, with an overlay, it seems to work fine in an html editor, but then when i switch it over to wordpress (wp bakery html block) that overlay doesn't seem to work

Any idea's?

This is the code

Regards

i've got a series of photos, with an overlay, it seems to work fine in an html editor, but then when i switch it over to wordpress (wp bakery html block) that overlay doesn't seem to work

Any idea's?

This is the code

http://scratchpad.io/intelligent-start-2820

Regards

• html
• html-editor

Share Improve this question asked Mar 13, 2019 at 1:06 yaznyazn 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I'm going to assume a few things to answer this. You may already be doing them, so just let me know if this isn't the right answer.

WordPress already defines the tags for html, body, and head. These cannot be defined twice on a page. When you're working in WordPress content, your markup is always saved to the body of the page. It's best practice to include all stylesheets and style tags in the head element, but it's not a requirement. In your case, you would want your styles to show right next to your markup.

Beyond that, I've made a few minor changes:

1. Add type="text/css" to your style tag.
2. Change your image src relative rather than absolute.

Give that a shot. You will still want to inspect the page source to make sure none of your markup is getting stripped or changed. I'm not familiar with wp bakery's html block, but they may not allow some markup.

<style type="text/css">
  .column_portfolio {
    float: left;
    width: 33.33%;
    padding: 5px;
    box-sizing: border-box;
  }

  /* Clearfix (clear floats) */
  .row_portfolio::after {
    content: "";
    clear: both;
    display: table;
  }

  .container_portfolio {
    position: relative;
    width: 100%;
  }

  .image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    backface-visibility: hidden;

  }


  .button_toShow {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }

  .text_toShow {
    transition: .5s ease;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }


  .container_portfolio:hover .text_toShow {
    display: none;
  }

  .container_portfolio:hover .image {
    opacity: 0.3;
  }

  .container_portfolio:hover .button_toShow {
    opacity: 1;
  }

  .container_portfolio:hover .text_toShow {
    opacity: 1;
  }


  .container_portfolio #overlay_portfolio {
    position: relative !important;
    cursor: pointer !important;
    display: block;

  }

  .container_portfolio #overlay_portfolio:hover:before {
    background: none !important;
  }


  .container_portfolio #overlay_portfolio:before {
    content: "" !important;
    position: absolute !important;
    display: block;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: lightblue;
  }
</style>
<div class="row_portfolio">
  <div class="column_portfolio">
    <div class="container_portfolio">
      <div id="overlay_portfolio">
        <img src="/wordpress-8/wp-content/uploads/2019/02/IMG_4774_2.jpg" alt="" class="image" style="width:100%">
      </div>

      <div class="text_toShow">
        <i id="camera_icon" class="fas fa-camera"></i>
        <h2 id="titles_portfolio">WEDDING PHOTOGRAPHY</h2>
      </div>
      <div class="button_toShow">
        <button class="button_hover_portfolio">VIEW GALLERY</button>
      </div>
    </div>
  </div>


  <div class="column_portfolio">

    <div class="container_portfolio">
      <div class="overlay_portfolio">
        <img src="/wp-content/uploads/2019/03/IMG_4535.jpg" alt="" class="image" style="width:100%">
      </div>

      <div class="text_toShow">
        <i id="camera_icon" class="fas fa-camera"></i>
        <h2 id="titles_portfolio">FULL WEDDING</h2>
      </div>
      <div class="button_toShow">
        <button class="button_hover_portfolio">VIEW GALLERY</button>
      </div>
    </div>
  </div>

  <div class="column_portfolio">

    <div class="container_portfolio">
      <div class="overlay_portfolio">
        <img src="/wp-content/uploads/2019/03/IMG_7033-Version-2-1.jpg" alt="" class="image" style="width:100%">
      </div>

      <div class="text_toShow">
        <i id="camera_icon" class="fas fa-camera"></i>

        <h2 id="titles_portfolio">PORTRAITS</h2>
      </div>
      <div class="button_toShow">
        <button class="button_hover_portfolio">VIEW GALLERY</button>
      </div>
    </div>
  </div>
</div>