Slider overlapping cards when hovering without changing the total width-CodePudding

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 >  
  <div ><span>A</span></div>
  <div ><span>B</span></div>
  <div ><span>C</span></div>
  <div ><span>D</span></div>
</div>

CodePudding user response：

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 >  
  <div ><span>A</span></div>
  <div ><span>B</span></div>
  <div ><span>C</span></div>
  <div ><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.

CodePudding user response：

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 >  
  <div ><span>A</span></div>
  <div ><span>B</span></div>
  <div ><span>C</span></div>
  <div ><span>D</span></div>
</div>