Topic: Post Container | Themeco Community

Tagged: x

← 1 2

Author

Posts
February 25, 2017 at 5:40 pm #1385706
Rad
Moderator
Hi there,

Question, why do you home as your columns class? The home class is a reserved selector for home page’s <body> element. Hence any CSS added to it will affect the entire <body> element and child elements.

Let’s change it to column-bg 🙂

Replace this CSS
```
.column-bg {
  position: relative;
  overflow: hidden;
}
.column-bg > * {
  z-index: 1;
  position: relative;
}
.column-bg:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:0;
  background-color: rgba(0,0,0,0.35);
}
```
Then add column-bg to your column’s class.

Hope this helps.
February 28, 2017 at 9:49 am #1388909

quituck
Participant

Perfect. Now how can I add links to the columns individually and a hover effect?

Thank you

February 28, 2017 at 10:48 am #1388982
Joao
Moderator
Hello There,

Thanks for the updates. What we can recommend in doing this in Cornerstone is by using a custom javascript. Please follow on this step.
1] Please turn on the advance controls
2] Select which column you would like to link and insert a custom class linked-column for example
3] Insert the following custom JS in the settings tab (in Cornerstone), Settings > Custom JS
```
(function($){
  $('<a id="column-link" href="#my-link">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#column-link') );
})(jQuery);
```
Please make sure that you have inserted the correct link #my-link for example.

We would loved to know if this has work for you. Thank you.
February 28, 2017 at 5:09 pm #1389330

quituck
Participant

Hi,
I have two more questions.

1.) How can I add a hover effect over the images?

2.) The JS codes caused a gap between my image and the section. How can I remove the spacing gap?

Please see the image attached for reference.

Thank you

March 1, 2017 at 1:04 am #1389838
Christopher
Moderator
Hi there,

Please add following code in Customize -> Custom -> Global CSS :
```
a#column-link {
    display: block;
transition: opacity 0.3s linear
}
a#column-link:hover {
    opacity: 0.5;
}
```
Hope that helps.
March 4, 2017 at 9:27 pm #1394773

quituck
Participant

HI,
Can you help me to figure out why my other two column links aren’t working? Also the code you provided did not remove the gap. Please advise.

Thank you

March 5, 2017 at 5:17 am #1394961
Christopher
Moderator
Hi there,

Please update your JS code to :
```
(function($){
  $('.linked-column').wrapInner('<a id="column-link" href="https://rastaverse.com/music/"></a>');
  $('.linked-columntwo').wrapInner('<a id="column-link" href="https://rastaverse.com/rasta-shop/"></a>');
  $('.linked-columnthree').wrapInner('<a id="column-link" href="https://rastaverse.com/rasta-dictionary/"></a>');

})(jQuery);
```
Update this code :
```
a#column-link:hover {
    opacity: 0.5;
}
```
To :
```
a#column-link:hover,a.column-linktwo,a.column-linkthree {
    opacity: 0.5;
}
```
Hope it helps.
Author

Posts

← 1 2

<script> jQuery(function($){ $("#no-reply-1377381 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>