Hello

Click here to add your own text

Hello

Click here to add your own text

working with pseudo container before.

/******* custom-class on grid-row: jb-hovering  ***********/

.jb-hovering .flex_cell {
  background-size: 0 !important;
  clip-path: inset(0 0 0 0);
}

.jb-hovering .flex_cell::before {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed !important;
  display: block;
  top: 0;
  left: 0;
  background-image: inherit;
  background-size: cover;
  padding: 0 !important
}

.jb-hovering .flex_cell:before {
  transition: 1s all ease 
}

.jb-hovering .flex_cell:hover:before {
  transform: scale(1.05);
  transition: 1s all ease
}

brave new world –  the pseudo class:   has

is supported by almost all browsers – except Firefox
(you can activate it via about:config and then layout.css.has-selector.enabled true)

this kind of parent selector will come in the future (even for Firefox) !

(Due to lack of time, I didn’t want to work out the optimisation for the responsive case here.)

This is a combination of the above code with pseudo containers that inherited the background. And grid box layout.

/***** that grid-row got the custom ID : real-grid ******/

#real-grid {
  transition: 500ms;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
}

#real-grid .flex_cell {
  width: unset !important;
}

#real-grid:has(.flex_cell:nth-of-type(1):hover) {
  grid-template-columns: 2fr 0.5fr 0.5fr;
}

#real-grid:has(.flex_cell:nth-of-type(2):hover) {
  grid-template-columns: 0.5fr 2fr 0.5fr;
}

#real-grid:has(.flex_cell:nth-of-type(3):hover) {
  grid-template-columns: 0.5fr 0.5fr 2fr;
}

London

Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click

Paris

Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text

New York

Click here to add your own text