[flickdigitalParticipant]

Hi there,

I have used elements in multiple places across a site I have built here:
http://www.evergreen-backcountry.com/off-piste-tours/

If you scroll down a little there are 3 columns across with a background picture (shaded), a button, and some text “Intro to Off Piste”, “Advanced Off Piste” etc.

The client has requested that when they hover over the column:
– the image will no longer be shaded
– the entire box will be clickable

I have used On Hover in old-school html sites but I have no idea how to make this happen here.

Your support is much appreciated.

[ChristopherModerator]

Hi there,

#1 Please provide us with screenshot.

#2 Please add custom class to columns like column-1,column-2, column-3.
Please add following code in Customize -> Custom -> Global JavaScript :

jQuery(".column-1").wrap("<a href='#'></a>");
jQuery(".column-2").wrap("<a href='#'></a>");
jQuery(".column-3").wrap("<a href='#'></a>");

Hope it helps.

[flickdigitalParticipant]

Hi there,

Thanks for the reply.

http://www.evergreen-backcountry.com/hakuba-backcountry-tours/

The images have a dark filter over them – this is done in photoshop. These aren’t image elements, they are columns with the image pulling in through the following code in the style field of the column:
background: url(http://www.evergreen-backcountry.com/ebg/wp-content/uploads/Usagi-Tint-650.jpg) no-repeat center center; background-size: cover;

I need help with 2 things.

1. How to make the entire column a link when hovered over.

I have tried the code above as follows:

This is in Customize -> Custom -> Global JavaScript :
jQuery(“.usagi-box”).wrap(““);

I then added the class “usagi-box” to the column, first in the class field, then in the id field. It wasn’t working.

2. Instead of using the background image with a filter, I would like to use a clean image that had a filter over it through CSS, and the filter is removed when hovering over the image.

I found the following code on this forum. This is to change from back and white to color, but I don’t know if I can apply it when the image is the background of the column as I have here?

.change-on-hover {
webkit-filter: grayscale(1); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
}

.change-on-hover:hover {
webkit-filter: none; 
-webkit-filter: none; 
-moz-filter: none;
filter: none;
}

Thanks in advance for your awesome support.

[ChristopherModerator]

Hi there,

#1 Please provide us with login credentials.

#2 Beside custom class that should be added to each column for linking them, add another class to change hover state.

e.g : column-1 change-on-hover
column-2 change-on-hover
column-3 change-on-hover

Now add following CSS :

.change-on-hover {
webkit-filter: grayscale(1); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
}

.change-on-hover:hover {
webkit-filter: none; 
-webkit-filter: none; 
-moz-filter: none;
filter: none;
}

Hope it helps.

[flickdigitalParticipant]

Hi there,

Thanks for this. The filter is now working fine.

I still can’t get the whole column to work as a link though.

I would like the columns to link to the same place as the buttons in those columns – just anchor links down the page. This code is in Global Javascript:

jQuery(".offpiste-1").wrap("<a href='#intro'></a>");
jQuery(".offpiste-2").wrap("<a href='#advanced'></a>");
jQuery(".offpiste-3").wrap("<a href='#private'></a>");

And the column classes are like this:

offpiste-1 change-on-hover etc.

This is the page:
http://www.evergreen-backcountry.com/off-piste-tours/

I will send through login details in a separate private reply.

Thanks in advance!

[flickdigitalParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

There was a javascript error that was preventing the code from working.

I was able to fix it by changing the code in your Custom > js to this

(function($) {
   $(document).ready(function() {
      $('.x-recent-posts a').removeAttr( "title" );
   });
})(jQuery);

(function($) {
$(document).ready(function(){
    $(".archive .entry-featured a").removeAttr("title");
});
})(jQuery);

jQuery(document).ready(function() {
  var currentYear = (new Date).getFullYear();
  jQuery("#year").text( (new Date).getFullYear() );
});
         
(function($){

  $('<a id="#link1" href="http://www.evergreen-backcountry.com/ebg/hakuba-backcountry-tours/#kitsune">').insertBefore('#linked-kitsune');
  $('#linked-kitsune').prependTo( $('#link1') );
  

  $('<a id="#link2" href="#process">').insertBefore('#linked-column-2');
  $('#linked-column-2').prependTo( $('#link2') );

})(jQuery);
  
jQuery(".offpiste-1").wrap("<a href='#intro'></a>");
jQuery(".offpiste-2").wrap("<a href='#advanced'></a>");
jQuery(".offpiste-3").wrap("<a href='#private'></a>");

Kindly check on your end.

Thanks

[flickdigitalParticipant]

Hi there,

Thanks for this. They are now working as links, however the second and third columns aren’t aligning correctly, they shift to the left with no spacing between them. In Cornerstone view they look fine.

Screenshot attached.

Thanks in advance!

[NicoModerator]

Hi There,

Try adding this code in your customizer > Custom > CSS:

.x-column.x-1-3 {
    width: 32.66666%;
}

Let us know how it goes.

Hope it helps.

Thanks.

[flickdigitalParticipant]

Hi,

Thank you, however the above css code hasn’t helped.

Still the same situation as in my post above. X Support kindly edited the javascript, columns are now working as links however there is no space between them – the columns are shifting to the left instead of aligning correctly.

Thanks for your ongoing support.

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.c-link {
   display: block;
   width: 30.66666%;
   margin-right:4%;
   float:left;
}

.c-link .x-column.x-1-3 {
   width:100%;
   margin-right:0;
}

.x-container.max.width .c-link:last-child {
   margin-right:0;
}

Hope that helps.

[flickdigitalParticipant]

Hi, that works but it breaks the responsiveness of the columns and in mobile view they all just cram into one row…

[flickdigitalParticipant]

I could probably solve this by using custom graphics instead of code.

If I was to dump all those columns and start over with custom graphics in image elements instead, what code would I use to serve a different image on-hover?

[Rue NelModerator]

Hello There,

If you want to serve a different image on hover, simply use your custom class like this:

.change-on-hover:hover {
  background-image: url(http://placehold.it/200x300/ff0000) !important;
}

You must supply the url of the image and when you do the hover there might be a slight delay of the image background.

By the way, have you successfully make the whole column as a link? If not yet, please have this solution. Please edit your page in Cornerstone, go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){
  var columns = $('#x-section-3 .x-column');
  columns.each(function(){
    var column = $(this);
    column.on('click touchstart', function(){
      var url = column.find('.x-btn').attr('href')
      window.location = url;
      console.log(column.find('.x-btn').attr('href'));
    });
  });
})(jQuery);

And then you’ll need to add the following css code in the customizer, Appearance > Customize > Custom > CSS so that there will be a pointer when you hover on the column

#x-section-3 .x-column:hover {
    cursor: pointer;
}

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

[Author]

Posts