Hover individually images

**gapin** · 04-22-2015, 01:06 PM

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

**styxlawyer** · 04-22-2015, 06:27 PM

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