Hover individually images

[gapin]

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


<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 */



#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; }

[styxlawyer]

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:



.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;}