Adding color overlay to promo box during hover

Support
#1

Hello, I’m trying to add a translucent color overlay (in my case navy blue at 0.3 opacity) to the promo boxes, so that when you hover over any part (image or text box) of the image, the overlay will be activated. The blue overlay is showing, but only to the padding within the text box – not the image nor the entire text box as in the following screen capture:

Also, if you hover over the text portion, it’s a deeper blue as you’ll see in the screen capture (so strange)…

but really I just want a single color during the hover. Here’s the code that I’ve inputted in the page’s Custom CSS:

.x-promo:hover {
  background-color: rgba(7,52,76,.5);
}

.x-promo-content:hover {
    background-color: rgba(7,52,76,.2);
}

I tried looking at several articles (the closest one is: https://theme.co/apex/forums/topic/hover-over-image-to-make-it-show-an-icon-color/), but it is not exactly the same situation, as I want the hover to apply to the entire box (whereas they want the background color of their text to remain white). After 2 hours of searching, cannot seem to find the solution. Can you tell me what I am doing wrong?

#2

Hi There,

Please update your custom CSS to this:

.x-promo:hover {
  background-color: rgba(7,52,76,.5);
}

.x-promo:hover .x-promo-content {
    background-color: rgba(7,52,76,.2);
}
#3

I tried your suggested code, but it is not working; I’ve triple-checked it to make sure I inputted the right code, but there is no still difference.

#4

Hi,

You can try this code instead.

.x-promo.promo-link {
    position:relative;
}

.x-promo.promo-link:before {
    position: absolute;
    left: 0;
     top: 0;
    bottom: 0;
    right: 0;
    background: #000080;
    z-index: 99999;
    content: '';
    display: block;
    overflow: hidden;
    opacity: 0;
}
.x-promo.promo-link:hover:before {
    opacity:0.3;
}

Hope that helps

#5

Thank you @paul.r, it worked! Now when I hover over any part of the promo box, the whole thing is highlighted in a single transparent colour overlay. You are brilliant! :smile:

#6

You are welcome!

#7

Actually, I just realized that the promo box is no longer clickable. I added a relative path in the code for the first promo box on the left, but it’s not registering the link when I click on the promo box.

`[x_promo image="//terracana.priscillathen.com/wp-content/uploads/2017/05/Deep-Cove-Links@1x.jpg" alt=“Deep Cove Links” class=“promo-link”]

Cove Links Golf Course

Netex Canada   |   Delta, BC

[/x_promo]`

Could you please tell me what is wrong with the code? Thanks.

#8

Hello There,

Thanks for updating in! Your code will output a broken html which potentially might messed up the page. The only safe code you can have is like this:

[x_promo image="//terracana.priscillathen.com/wp-content/uploads/2017/05/Deep-Cove-Links@1x.jpg" alt="Deep Cove Links" class="promo-link"]<a href="//terracana.priscillathen.com/projects/cove-links-golf-course/"><h3 class="h4 man">Cove Links Golf Course</h3>
<p style="color: #07344C;">Netex Canada &nbsp;&nbsp;|&nbsp;&nbsp; <em>Delta, BC</em></p></a>
[/x_promo]

This code will only add a link to the contents of the promo shortcode and not the whole promo code instead.

Hope this helps.

#9

Thanks for the tip @RueNel, I tried your suggestion and changed the anchor tag to wrap inside the promo box (not outside as it was before), but the link in the promo box is still not clickable. If you read the thread from the beginning, I’m trying to get the entire promo box (image, content background and text) to change colour on hover, as well as make the entire promo box clickable. @paul.r was able to help me with the colour change on hover, but it is no longer clickable. Please help! Thanks.

#10

Hello There,

Thanks for updating in! By default, the only the promo content will accept a link text. As I have explained in my previous reply that your code:

<a href="//terracana.priscillathen.com/projects/cove-links-golf-course/">[x_promo image="//terracana.priscillathen.com/wp-content/uploads/2017/05/Deep-Cove-Links@1x.jpg" alt="Deep Cove Links" class="promo-link"]
<h3 class="h4 man">Cove Links Golf Course</h3>
<p style="color: #07344C;">Netex Canada &nbsp;&nbsp;|&nbsp;&nbsp; <em>Delta, BC</em></p>
[/x_promo]</a>

will output a broken html which potentially might messed up the page. It is not valid and acceptable.

Here’s what I want you to do,
1.) Please remove your shortcodes inside the text element. Keep in mind that text elements will convert line breaks, new lines and other characters into html output.
2.) Remove the Text elements as well.
3.) Use the Promo element instead. You can easily drag and drop it in the columns as a replacements for the text element.
4.) In the promo content, please insert this instead:

<h3 class="h4 man">Cove Links Golf Course</h3>
<p style="color: #07344C;">Netex Canada &nbsp;&nbsp;|&nbsp;&nbsp; <em>Delta, BC</em></p>
<a href="//terracana.priscillathen.com/projects/cove-links-golf-course/">this is the link</a>

Do not mind the “this is the link”. That is only a placeholder for the link and will be gone in the live preview.

You will have an output just like this:

5.) And finally, in the JS section (http://prntscr.com/g4nw0q), please insert this JS code:

jQuery ( function( $ ) {

  $('.x-promo .x-promo-content a').each( function() {
    $( this ).parent().parent().parent().wrap( '<a href="' + $( this ).attr('href') + '"></a>' );
    $( this ).remove();
  } );

} );

And this is the final output upon hovering anywhere inside the box:

We would loved to know if this has work for you. Thank you.

#11

Thank you for your lovely and detailed explanation with screen captures @RueNel, it really helps makes things so clear! I added the code you suggested, and it almost works, except that the “hover” effect is not working – there is no colour change on hover.

I kept a copy of the original row (with Text elements) at the bottom, which displays the desired blue hover effect (but does not show the text). The top row is where I implemented your suggestions with the Promo Boxes… so it’s almost there, but not quite! I’m guessing it’s something in the Javascript code? Looking forward to your response. Thanks in advance. :blush:

#12

Hi again,

Add the following CSS code in your Customizer as well:

.x-promo {
    position: relative;
}

.x-promo:before {
    position: absolute;
    left: 0;
     top: 0;
    bottom: 0;
    right: 0;
    background: #000080;
    z-index: 99999;
    content: '';
    display: block;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.x-promo:hover:before {
    opacity:0.3;
}

This should fix things. Let us know how this goes!

#13

Oh, I had specified it as .x-promo.promo-link {...}, whereas all I needed was simply .x-promo {...}).
Thank you @Nabeel and @RueNel (what team work)! You guys rock! :smile:

1 Like
#14

Glad we could help.

Cheers!