Background Image link

Support
#1

Hi guys,
I want know if it is possible to show one row full width, with three (or two) column.
In any cells, I put a background image.
I would put an action on any cell. I.e. change trasparence on hover mouse, and put a link.
i.e. like a similar web site (https://www.fondazionepetruzzelli.com/) in the middle with link: “family concert” “Andrea”…“etc…”

I see that I cannot make it, but only put an array of images. But I would a row fullwidth with any problem when I resize windows of my browser. And I’m not able to do…

Do you have any suggest for me?

Tnx,
Francesco

#2

Hi Francesco.

Here is a solution for your issue.

Add the following code to Theme Options CSS

.x-bnb-image-grid {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: stretch;
          align-items: stretch;
  margin: -10px;
}

.x-bnb-image-grid > a {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  -webkit-flex: 1 1 360px;
          flex: 1 1 360px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 10px;
  min-height: 300px;
  font-size: 2rem;
 
}

.x-bnb-image-grid > a:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: rgba(21, 21, 21, 0.65);
  transition: background-color 0.5s ease;
}

.x-bnb-image-grid > a:hover:before,
.x-bnb-image-grid > a:focus:before {
  background-color: rgba(21, 21, 21, 0.35);
}

.x-bnb-image-grid > a:hover > .bg,
.x-bnb-image-grid > a:focus > .bg {
  transform: scale(1.1);
}

.x-bnb-image-grid > a:hover > div > small,
.x-bnb-image-grid > a:focus > div > small {
  color: #ffffff;
}

.x-bnb-image-grid > a > .bg {
  display: block;
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-size: cover;
  transition: transform 0.5s ease;
}

.x-bnb-image-grid > a > div {
  width: 100%;
  padding: 1em;
  font-size: 1em;
  line-height: 1;
}

.x-bnb-image-grid > a > div > span {
  display: block;
  overflow: hidden;
  font-size: 1em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
}

.x-bnb-image-grid > a > div > small {
  display: block;
  overflow: hidden;
  margin: 0.35em 0 0;
  font-size: 0.575em;
  font-weight: 700;
  letter-spacing: 0.065em;
  line-height: 1.4;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff;
  transition: color 0.5s ease;
}

On Each Column on Cornerstone you can add a Raw Code Element and add the following code and adjust according to your needs.

Replace: http://exemple.com/wp-content/uploads/2018/02/IMG.jpg with your background Image URL
Replace the Title and SubTitle or remove if you dont need.
Replace # with the url of the targeted page.

<div class="x-bnb-image-grid">

  <a href="#">
    <span class="bg" style="background-image: url(http://exemple.com/wp-content/uploads/2018/02/IMG.jpg"></span>
    <div>
      <span>Title</span>
      <small>Subtitle...</small>
    </div>
  </a>


</div>

Hope it helps

#3

if I use simple a text to link, it is possible change trasparency to background just only?

For one image element I have used this CSS code

/* Disable grayscale on hover */
.x-grey-img > img {
-webkit-filter: grayscale(1);
filter: gray;
transition: all ease 0.5s;
}

.x-grey-img:hover > img {
filter: none; /* IE6-9 /
-webkit-filter: grayscale(0); / Google Chrome, Safari 6+ & Opera 15+ /
filter: grayscale(0); / Microsoft Edge and Firefox 35+ */
}

But it is for image element. I would set a grayscale for background just only. No any zoom…

Tnx,
Francesco

#4

Hi Francesco,

To clarify, the columns in this site is not a link but the headlines inside it.

Please follow this steps and do it on a draft page first and just save it as a content template, so you can insert it on any page later.

First add a Section, then inspect the ROW, turn off the Inner Container option and turn on the Marginless Columns option. This will make your ROW a fullwidth and get your columns closed. And add a CLASS upcoming-events to the ROW so we can easily target it later with CSS.


Then inspect the Columns, enable the Background Advance option, so you’ll get 2 layers of background. First is the Lower Layer, set your background-image there, then the Upper Layer set it as a semi-transparent color or a solid color (like what they did here), this background-color will overlay to your background-image, do this for all your columns.


Then add this to Theme Options > CSS

.upcoming-events .x-column:hover .x-bg-layer-upper-color {
	background-color: transparent !important;
	-webkit-transition: background-color 1s; /* Safari */
    transition: background-color 1s;
}

This will remove the overlay background color when you hover the columns. Make sure you added the Class upcoming-events to the ROW or else this will not work.

The only thing left to do is add your headline links to the Columns. Add a Class mvl to your headline so they vertically center inside the column.

Hope that helps,
Cheers!

#5

Is this in X or in Pro? I’m using X with the Ethos stack and I don’t see the column option for Advanced Background. I can’t even add an image as a column background.

#6

Hey @keds2300,

That is available both in X and Pro. It sounds like you’re using an old version. Please check our Changelog and our Release Notes. Then, follow our Update Guide.

If you’re already using the latest version, you’re most probably using a Classic Column or you’ve built your page using an old version of X where V2 elements was not available yet.

#7

I’m using X v.6.0.4. I started with the Ethos2 sample and that’s where I see this issue. I created a brand new page and started with a new section and things seem to be working now.

#8

Hi There,

Yes, our standard demos are built with the classic section/row/column that is why it has fewer options.

Glad you sorted things out,
Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.