Need to use some feature

[SimonDumouchel]

Hi,

How can i use some feature from one of your demo ?

http://demo.theme.co/bed-and-breakfast/

In this demo at the Explore our rooms section, i want to have the exact effect on mouse over and caption on this images. I see its something like x-bnb-image-grid but i cant figure out how to reproduce in my site. The stack is Renew

Thanks to share you how to do step.

[thai]

Hi There,

Please try adding this custom HTML to the raw content element:

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

  <a href="http://demo.theme.co/bed-and-breakfast/accommodations/murphy-standard/" style="outline: none;">
    <span class="bg"><img src="http://demo.theme.co/bed-and-breakfast/wp-content/uploads/sites/80/2017/09/bg-standard.jpg" style="height: 100%;width: auto !important"></span>
    <div>
      <span>Murphy Standard</span>
      <small>From $149 a Night</small>
    </div>
  </a>

  <a href="http://demo.theme.co/bed-and-breakfast/accommodations/murphy-exclusive/">
    <span class="bg"><img src="http://demo.theme.co/bed-and-breakfast/wp-content/uploads/sites/80/2017/09/bg-exclusive.jpg" style="height: 100%;width: auto !important"></span>
    <div>
      <span>Murphy Exclusive</span>
      <small>From $289 a Night</small>
    </div>
  </a>

</div>

After that adding this custom CSS under X > Theme Options > CSS:

/*
// Background Overlay.
*/

.x-bnb-bg-overlay {
  position: relative;
  overflow: hidden;
}

.x-bnb-bg-overlay:before {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: rgba(0, 0, 0, 0.75);
}


/*
// Image Grid.
*/

.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;
  box-shadow: 0 0.25em 1.5em rgba(0, 0, 0, 0.35);
}

.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;
}

Hope it helps

[SimonDumouchel]

Hi Txs, working just fine

[christian]

You’re welcome.