Minimalist Image Slider containing bare minimum HTML & CSS using background-image transition

user_509670 0
Viewed 136

While trying to set the background with as minimal code as possible HTML code (and put as much as possible into CSS) i'm stuck in this jsfiddle demo.

MAIN QUESTION
Why are the third and fourth slide not the same background size and center origin as the first and second slide? Removing the -image part and using just the shorthand background apparently breaks the background position and centering, despite these rules being explicitely set in the CSS. What have I overlooked?

BONUS QUESTION
The transision has two effects: first a horizontal sliding effect followed by a zoom-in at the end. Is it possible to make both effects to work parallel in stead of one after another? In other words to start the zoom while the slide is horizontally sliding, for a more dynamic smooth transition?

.

style="background-image: url(https://...
Gives the desired zoom/centering result, with background image fitting/centering nicely:
enter image description here

.

style="background: url(https://...
Gives an undesired result, with background image not fitting/centering correctly:
enter image description here

flexbox background background-image css html
2 Answers

CSS variables are made for this purpose and you can adjust the background-size to have the need transition effect:

container {
  display: flex;
  margin: auto;
  width: 612px;
  outline: 1px solid black;
  height: 306px;
}

slide {
  flex: 1;
  background-image: var(--i);
  background-position: center;
  background-size: auto 100%;
  padding: 2px 0 0 2px;
  color: rgba(0, 0, 0, 0.5);
  transition: all .67s ease;
}

container slide:hover {
  flex: 15;
  background-size: auto 120%;
}
<container>
  <slide style="--i: url(https://cdn.dribbble.com/users/729829/screenshots/4185141/galshir-cactus-coffee.png)">1</slide>
  <slide style="--i: url(https://cdn.dribbble.com/users/729829/screenshots/6146136/galshir-tea-biscuit_2x.png)">2</slide>
  <slide style="--i: url(https://cdn.dribbble.com/users/729829/screenshots/4185141/galshir-cactus-coffee.png)">3</slide>
  <slide style="--i: url(https://cdn.dribbble.com/users/729829/screenshots/6146136/galshir-tea-biscuit_2x.png)">4</slide>
</container>

user_86203330

The main reason for this behavior in your code is that you specified rule background in the styles attribute, inside the tags.:

<slide style="background: url()">3</slide>

The styles in the attribute take precedence over the styles in the css!

When using the shorthand background, all of the following rules are overwritten:

slide {
    ...
    background-position: center;
    background-size: cover;
    background-origin: content-box;
    background-clip: border-box;
    ...
}

Because background already contains default values that differ from the values I indicated above.

The default rewriting values, the background, as well as the background specified in the attributes of the style, is the source of the problem in your code.

My advice:

  • don't declare styles in attributes yourself unnecessarily;
  • use background-image;
  • always use valid tags (even for SO examples):
  • you can use !important to override background rules:

Like that:

slide {
    ...
    background-position: center !important;
    background-size: cover !important;
    background-origin: content-box !important;
    background-clip: border-box !important;
    ...
}
user_135734440
Related