Hover individually images

Hi there!!!

I have i images on two rows. I made an hover effect. But when I hover with mouse any image, all of them start to move. Also the next div id=footer star to move down.
How I can make that I hover image, the hover effect it applies only to that image and all the rest keep in place?

Thanks very much for your help

Code:

---

<div id="popup">
   
   
      <a href="#" data-reveal-id="myModal1"><img src="../img/care_vesna-osen.jpeg" title="ВЕСНА И ОСЕНЬ" class="care-image"/></a>     
      <div id="myModal1" class="reveal-modal">
      <img class="popup-image" src="../img/care_vesna-osen.jpeg" />
      <h1>Весна и осень</h1>
                <p>
Консервация и подготовка участка к зиме – не менее важное мероприятие. Если осенью провести все необходимые работы в саду (уборка растительных отходов, рыхление цветников, прополка, удаление выпадов, мульчирование, подкормки, обрезки, укрытие и пр.), то растения отлично переживут любые зимы. Так же, как и весной, мы приезжаем на ваш участок и в кратчайшие сроки приводим его в полный порядок.</p>
    <a class="close-reveal-modal">×</a>
    </div>
             
                           
    <a href="#" data-reveal-id="myModal2"><img src="../img/care_gazon.jpeg" title="ГАЗОН" class="care-image"/></a>
      <div id="myModal2" class="reveal-modal">
      <img class="popup-image" src="../img/care_gazon.jpeg" />
      <h1>Газон</h1>
      <p> ремонт и замена выпадов и пр.) и в течение сезона обеспечим всем необходимым в рекомендованные агротехнические сроки.</p>
      <a class="close-reveal-modal">×</a>
    </div>

                       
        <a href="#" data-reveal-id="myModal3"><img src="../img/care_plodovoi-sad.jpeg" title="ПЛОДОВОЙ САД"/ class="care-image"/></a>
        <div id="myModal3" class="reveal-modal">
        <img class="popup-image" src="../img/care_plodovoi-sad.jpeg" />
        <h1>Плодовой сад</h1>
        <p>ка и мульчирование приствольных зон под чёрным паром, борьба с вредителями и болезнями и пр.).</p>
        <a class="close-reveal-modal">×</a>
      </div>
       
        <p></p>   

        <a href="#" data-reveal-id="myModal4"><img src="../img/care_svetniki.jpeg" title="ЦВЕТНИКИ" class="care-image"/></a>
        <div id="myModal4" class="reveal-modal">
        <img class="popup-image" src="../img/care_svetniki.jpeg" />
        <h1>Цветники</h1>
        <p>ы, мульчирование, подкормки, деление). Высадка рассады однолетних цветов и уход за ними. Уход за элементами вертикального озеленения.
</p>
          <a class="close-reveal-modal">×</a>
        </div>

          <a href="#" data-reveal-id="myModal5"><img src="../img/care_obrezka.jpeg" title="ОБРЕЗКА И СТРИЖКА" class="care-image"/></a>
          <div id="myModal5" class="reveal-modal">
          <img class="popup-image" src="../img/care_obrezka.jpeg" />
          <h1>Обрезка и стрижка</h1>
          <p>, стрижка подарит саду здоровье, молодость и красоту, задуманную дизайнером.</p>
          <a class="close-reveal-modal">×</a>
      </div>

          <a href="#" data-reveal-id="myModal6"><img src="../img/care_remont.jpeg" title="РЕМОНТ ДИЗАЙНА" class="care-image" /></a>
          <div id="myModal6" class="reveal-modal">
          <img class="popup-image" src="../img/care_remont.jpeg" />
          <h1>Ремонт Дизайна</h1>
          <p>Сад – живой организм, который растёт и меняется каждый месяц. Созданная ландшафтная композиция требует постоянного не поддаётся лечению, нужно обязательно удалять, чтобы не заразить весь сад. Не нарушая ландшафтной композиции, мы удаляем даже большие деревья и пересаживаем на новое место крупные кустарники.</p>
          <a class="close-reveal-modal">×</a>
            </div>
           
        </div>

---

/* CSS Document */

Code:

---

#outer                        { width:930px;margin:0 auto; background-color:#FFF; }

#wrapper                        {width:900px; margin:0 auto;}

#content                        {width:900px; margin:0 auto;}

body                                { background: -webkit-linear-gradient(#EBE0D6, #6B4724); }

h1,p                                {margin-left:50px;}



#sliderContent                { margin:0 auto;}



#footer                      { background-color:#72E600;}




.popup-image                    { margin:0 48px; border-radius:5px;}
.care-image                        {padding:0; width:230px; height:120px; padding:4px 4px; margin:5px 25px; border-radius:9px;                        background-color:#FFF;border:1px solid #D9FFB2;
}

.care-image:hover          { border:6px solid  #A5FF4D; }


---

You are changing the width of the border from 1px to 6px in .care-image:hover without compensating for the change by reducing the padding. That's why all the images are moving.

Try this:

Code:

---

.care-image {width:230px; height:120px; padding:5px; margin:5px 25px; border-radius:9px ;background-color:#FFF; border:1px solid #D9FFB2;}
.care-image:hover { padding:0; border:6px solid  #A5FF4D;}

---