Увеличить div при наведении мыши

Question

Увеличить div при наведении мыши

Рейтинг: 0Ответов: 2Опубликовано: 16.08.2023

Такая проблема, нужно увеличить div при наведении мышки. Сделал через hover, но все пошло не по плану. Почемуто падинги при наведении на один блок срабатывают у всех блоков. Нужно сделать вот так

body{
    font-family: 'Ubuntu', sans-serif;
    background-color: #fdde7e;
}
.grid{

    width: 1140px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 100px;
}
.col{
    width: 360px;
    background: white;
    padding: 35px 0;
}
.col-item{
    width: 165px;
    margin: auto;
    text-align: center;
}
.price{
color: #02995b;
font-size: 65px;
margin: 0 0 20px 0;
font-weight: 400;

}
.kava{
    width: 135px;
    height: 135px;
   
}
.name{
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 3px;
  line-height: 35px;
}
.promotion{
    width: 160px;
    margin: 0;
}



.col-1:hover {

    padding: 60px 0;
}

.col-2:hover {
    padding: 60px 0;
}

.col-3:hover {

    padding: 60px 0;
}

    
<div class="grid">
    <div class="col col-1">
         <div  class="col-item">
            <h2 class="price">$2</h2>
            <img class="kava" src="i/Kava.jpg" alt="kava">
            <h3 class="name">Bronze</h3>
            <p class="promotion">any cup of coffee until $3</p>
         </div>
    </div>
    <div class="col col-2 ">
        <div  class="col-item">
           <h2 class="price">$2</h2>
           <img class="kava" src="i/Kava.jpg" alt="kava">
           <h3 class="name">Gold</h3>
           <p class="promotion">any cup of coffee until $5</p>
        </div>
   </div>
   <div class="col col-3 ">
    <div  class="col-item">
       <h2 class="price">$2</h2>
       <img class="kava" src="i/Kava.jpg" alt="kava">
       <h3 class="name">Silver</h3>
       <p class="promotion">any cup of coffee until $4</p>
    </div>
</div>


</div>

Подскажите, что делаю не так?

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0

body {
  font-family: 'Ubuntu', sans-serif;
  background-color: #fdde7e;
}

.grid {
  width: 1140px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  padding: 100px;
}

.col {
  width: 360px;
  background: white;
  padding: 35px 0;
  transition: transform .2s;
}

.col-item {
  width: 165px;
  margin: auto;
  text-align: center;
}

.price {
  color: #02995b;
  font-size: 65px;
  margin: 0 0 20px 0;
  font-weight: 400;
}

.kava {
  width: 135px;
  height: 135px;
}

.name {
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 3px;
  line-height: 35px;
}

.promotion {
  width: 160px;
  margin: 0;
}

.col:hover {
  transform: scale(1, 1.5);
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>hover</title>

</head>

<body>
  <div class="grid">
    <div class="col col-1">
      <div class="col-item">
        <h2 class="price">$2</h2>
        <img class="kava" src="i/Kava.jpg" alt="kava">
        <h3 class="name">Bronze</h3>
        <p class="promotion">any cup of coffee until $3</p>
      </div>
    </div>
    <div class="col col-2 ">
      <div class="col-item">
        <h2 class="price">$2</h2>
        <img class="kava" src="i/Kava.jpg" alt="kava">
        <h3 class="name">Gold</h3>
        <p class="promotion">any cup of coffee until $5</p>
      </div>
    </div>
    <div class="col col-3 ">
      <div class="col-item">
        <h2 class="price">$2</h2>
        <img class="kava" src="i/Kava.jpg" alt="kava">
        <h3 class="name">Silver</h3>
        <p class="promotion">any cup of coffee until $4</p>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

▲ 0

Долго сидел над вопросом, но как только опубликовал придумал решение. Подскажите, так же можно делать? Ведь работает :)

 
body{
    font-family: 'Ubuntu', sans-serif;
    background-color: #fdde7e;
}
.grid{
    position: relative;
    width: 1140px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 100px;
}
.col{

    width: 360px;
    background: white;

}
.col:hover{
   width: 360px;
   background: white;
   padding: 35px 0;
   margin: -35px 0;
   transition: .5s ease;
   -webkit-transition: .5s ease;
   -moz-transition: .5s ease;
   -ms-transition: .5s ease;
   -o-transition: .5s ease;
}
.col-item{
    padding: 35px 0;
    width: 165px;
    margin: auto;
    text-align: center;
}
.price{
color: #02995b;
font-size: 65px;
margin: 0 0 20px 0;
font-weight: 400;

}
.kava{
    width: 135px;
    height: 135px;
   
}
.name{
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 3px;
  line-height: 35px;
}
.promotion{
    width: 160px;
    margin: 0;
}

<div class="grid">
    <div class="col">
         <div  class="col-item">
            <h2 class="price">$2</h2>
            <img class="kava" src="i/Kava.jpg" alt="kava">
            <h3 class="name">Bronze</h3>
            <p class="promotion">any cup of coffee until $3</p>
         </div>
    </div>
    <div class="col">
        <div  class="col-item">
           <h2 class="price">$3</h2>
           <img class="kava" src="i/kava-2.jpg" alt="kava">
           <h3 class="name">Gold</h3>
           <p class="promotion">any cup of coffee until $5</p>
        </div>
   </div>
   <div class="col ">
    <div  class="col-item">
       <h2 class="price">$2.5</h2>
       <img class="kava" src="i/kava-3.jpg" alt="kava">
       <h3 class="name">Silver</h3>
       <p class="promotion">any cup of coffee until $4</p>
    </div>
</div>


</div>

Увеличить div при наведении мыши

Ответы