HTML:
<!DOCTYPE html>
<head>
<style>
.side-wrapper{
margin: 0 auto;
margin-top: 50px;
width: 1100px;
display: flex;
flex-direction:row;
justify-content:center;
align-items: center;
}
.side1{
width: 250px;
height: 300px;
background-image: linear-gradient(to right,#ba254c 30%,#9e58b9 70%);
border: solid linear-gradient(to right,#ba254c 30%,#9e58b9 70%) 10px;
border-radius: 10px;
margin: 10px;
transition: height 2s;
}
.side1:hover {
height: 200px;
}
.side2{
width: 300px;
background-image: linear-gradient(to right,#9e58b9 30%,#01879e 70%);
border: solid linear-gradient(to right,#ba254c 30%,#9e58b9 70%) 10px;
border-radius: 10px;
height: 360px;
transition: 2s;
}
.side2:hover {
transition: scale(1.1);
margin-left: 30px;
margin-right: 30px;
}
.side3{
width: 250px;
height: 300px;
background-image: linear-gradient(to right,#ba254c 30%,#9e58b9 70%);
border: solid linear-gradient(to right,#ba254c 30%,#9e58b9 70%) 10px;
border-radius: 10px;
margin: 10px;
transition: height 2s;
}
.side3:hover{
height: 200px;
}
</style>
</head>
<body>
<div class="side-wrapper">
<div class="side1">
</div>
<div class="side2">
</div>
<div class="side3">
</div>
</div>
</body>
--Das ist mein Code. Ich will, dass er die translate-aktionen 1. gleichzeitig und 2. automatisch (ohne mouseover) macht. Ist das möglich?
--Vielen Dank schonmal!