Slider overlapping cards when hovering without changing the total width

user_14807111 0
Viewed 75

I have a row of overlapping cards in a row. When I move the mouse over a card, the card should be extended to the left so that the whole card is visible. Unfortunately, this effect changes the total width.

Question: What do I have to do so that the total width remains the same when hovering?

:root {
  --slide-margin: 44px;
  --slide-duration: 0.5s;
}

.w {
  background-color: lightgray;
  display: flex;
  justify-content: center;
  padding: 20px;  
}

.w > div {
  box-sizing: border-box;
  padding: 10px;
  width: 150px;
  height: 150px;  
  margin-left: -75px;
  transition: all var(--slide-duration) ease-out;  
}

.w > div:hover{
  margin-left: -75px;
  margin-right: 75px;
  background: black;
}

.w > div > span {  
  background: inherit;
  background-clip: text;  
  color: transparent;
  filter: invert(1) grayscale(1);  
}

.a {
  background-color: lightblue;
}

.b {
  background-color: lightgreen;    
}

.c {
  background-color: brown;    
}

.d {
  background-color: purple;    
}
<div class="w">  
  <div class="a"><span>A</span></div>
  <div class="b"><span>B</span></div>
  <div class="c"><span>C</span></div>
  <div class="d"><span>D</span></div>
</div>

css html javascript
3 Answers

You can introduce a fake fifth div that shares the background-color with the container element, effectively covering the right half of div.d initially:

:root {
  --slide-margin: 44px;
  --slide-duration: 0.5s;
}

.w {
  background-color: lightgray;
  display: flex;
  justify-content: center;
  padding: 20px;  
}

.w > div {
  box-sizing: border-box;
  padding: 10px;
  width: 150px;
  height: 150px;  
  margin-left: -75px;
  transition: all var(--slide-duration) ease-out;  
}

.w > div[class]:hover{
  margin-left: -75px;
  margin-right: 75px;
  background: black;
}

.w > div[class]:hover ~ div[class] {
  margin-right: 0;
}

.w > div > span {  
  background: inherit;
  background-clip: text;  
  color: transparent;
  filter: invert(1) grayscale(1);  
}

.a {
  background-color: lightblue;
}

.b {
  background-color: lightgreen;    
}

.c {
  background-color: brown;    
}

.d {
  background-color: purple;
  margin-right: 75px;
}

.w > div:not([class]) {
  background-color: lightgray;
}
<div class="w">  
  <div class="a"><span>A</span></div>
  <div class="b"><span>B</span></div>
  <div class="c"><span>C</span></div>
  <div class="d"><span>D</span></div>
  <div></div>
</div>

Due to the nature of transitions, the container is still a little wobbly when quickly hovering through, but alot less than with your code.

user_37443040

I think that is what you need. I make boxes position:relative to use right, left.

Gave margin-left to all boxes except the first one.

.box:nth-child(1) ~ .box{
  margin-left:-75px;   
}

Because of using margin, container will take sum of widths of all boxes.

When hovering first box gave all other siblings right:-75px

.box:nth-child(1):hover ~ .box {
  right: -75px;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  min-height: 100vh;
  margin: 0;
  background-color: bisque;
  display: grid;
  place-content: center;
}

:root {
  --slide-margin: 44px;
  --slide-duration: 0.5s;
}

.container {
  background-color: lightgray;
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: min-content;
}

.box {
  box-sizing: border-box;
  padding: 10px;
  width: 150px;
  height: 150px;  
  transition: all var(--slide-duration) ease-out; 
  position: relative;
  right: 0;
}

.box:nth-child(1) ~ .box{
  margin-left:-75px;   
}

.box:hover{
  background-color: black;
}

.box:nth-child(1):hover ~ .box {
  right: -75px;
}


.box:nth-child(3):hover,
.box:nth-child(2):hover{
  right: 75px;
}

.a {
  background-color: lightblue;
}

.b {
  background-color: lightgreen;
}

.c {
  background-color: brown;   
}

.d {
  background-color: purple;   
}
<div class="container">
      <div class="a box"><span>A</span></div>
      <div class="b box"><span>B</span></div>
      <div class="c box"><span>C</span></div>
      <div class="d box"><span>D</span></div>
    </div>

user_177557770

You mean like this?? .

$(".a").mouseover(function(){
 $(".a").css("margin-left", "-150px")
 });
 

$(".b").mouseover(function(){
 $(".a").css("margin-left", "-150px")
 });
 
$(".c").mouseover(function(){
 $(".a").css("margin-left", "-150px")
  $(".b").css("margin-left", "-75px")
 });
 
 $(".d").mouseover(function(){
  $(".a, .b, .c, .d").css("margin-left", "-75px")   
     
});

 $(".w").mouseout(function(){
   $(".a, .b, .c, .d").css("margin-left", "-75px")
     
});
:root {
  --slide-margin: 44px;
  --slide-duration: 0.5s;
}

.w {
  background-color: lightgray;
  display: flex;
  justify-content: center;
  padding: 20px;  
}

.w > div {
  box-sizing: border-box;
  padding: 10px;
  width: 150px;
  height: 150px;  
  margin-left: -75px;
  transition: all var(--slide-duration) ease-out;  
}



.a:hover{
  margin-right: 75px;
  background: black;
  
}

.b:hover{
  margin-left: -75px;
  margin-right: 75px;
  background: black;

}

.c:hover{
  margin-right: 75px;
  background: black;

}

.d:hover{
  background: black;
}

.w > div > span {  
  background: inherit;
  background-clip: text;  
  color: transparent;
  filter: invert(1) grayscale(1);  
}

.a {
  background-color: lightblue;
}

.b {
  background-color: lightgreen;    
}

.c {
  background-color: brown;    
}

.d {
  background-color: purple;    
}
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<div class="w">  
  <div class="a"><span>A</span></div>
  <div class="b"><span>B</span></div>
  <div class="c"><span>C</span></div>
  <div class="d"><span>D</span></div>
</div>

user_165130010
Related