0

Подскажите пожалуйста как сделать чтобы при наведении на ссылки ничего не сдвигалось

*,
*:before,
*:after {
  box-sizing: border-box;
}
.services{
  width: 980px;
}

.btn {
  display: inline-block;
  vertical-align: middle;
  /*padding: .5rem 1rem;*/
  text-transform: uppercase;
  color: #fff;
  background: #5b667a;
  text-decoration: none;
  margin: 36px 13px;
  height: 55px;
  width: 235px;
  padding-top: 18px;
}

.btn img{
  display: none;
}

.btn:hover img{
  display: block;
  margin: 12px auto;
}

.btn:hover{
  height: 130px;
  background: #6884ad;
  margin: 0 13px;
}

.otolaryngologist:hover{
  background: #ffcc29;
}

.row {
  text-align: center;
  overflow: hidden;
}

.left {
  width: 25%;
  float: left;
}

.right {
  width: 25%;
  float: right;
}

.center {
  width: 50%;
  float: left;
}

.center img {
  max-width: 100%;
  width: 100%;
  height: auto;
}
<div class="services">
		<div class="row">
		  <a href="#" class="btn pediatria"><img src="images/pediatria.png" alt=""/>Педіатрія</a>
		  <a href="#" class="btn therapy"><img src="images/therapy.png" alt=""/>Терапія</a>
		</div>
		<div class="row">
		  <div class="left">
		    <a href="#" class="btn otolaryngologist"><img src="images/otolaryngologist.png" alt=""/>Отоларинголог</a>
		    <a href="#" class="btn cosmetology"><img src="images/cosmetology.png" alt=""/>Косметологія</a>
		    <a href="#" class="btn mamology"><img src="images/mamology.png" alt=""/>Мамологія</a>
		    <a href="#" class="btn dietology"><img src="images/dietology.png" alt=""/>Дієтологія</a>
		    <a href="#" class="btn urology"><img src="images/urology.png" alt=""/>Урологія</a>
		    <a href="#" class="btn surgery"><img src="images/surgery.png" alt=""/>Хірургія</a>
		    <a href="#" class="btn usd"><img src="images/usd.png" alt=""/>Узд</a>
		    <a href="#" class="btn laboratory"><img src="images/laboratory.png" alt=""/>Лабораторія</a>
		  </div>
		  <div class="center">
		    <img src="http://cliparts.co/cliparts/yTk/Kz6/yTkKz6LAc.jpg" alt="">
		    <!--img src="images/human.png" alt=""/-->
		  </div>
		  <div class="right">
		    <a href="#" class="btn neurology"><img src="images/neurology.png" alt=""/>Неврологія</a>
		    <a href="#" class="btn dermatology"><img src="images/dermatology.png" alt=""/>Дерматологія</a>
		    <a href="#" class="btn cardiology"><img src="images/cardiology.png" alt=""/>Кардіологія</a>
		    <a href="#" class="btn traumatology"><img src="images/traumatology.png" alt=""/>Травматологія</a>
		    <a href="#" class="btn gynecology"><img src="images/gynecology.png" alt=""/>Гінекологія</a>
		    <a href="#" class="btn proctology"><img src="images/proctology.png" alt=""/>Проктологія</a>
		    <a href="#" class="btn manual_therapy"><img src="images/manual_therapy.png" alt=""/>Мануальна терапія</a>
		    <a href="#" class="btn physiotherapy"><img src="images/physiotherapy.png" alt=""/>Фізіотерапія</a>
		  </div>
		</div>  
		<div class="row">
		  <a href="#" class="btn massage"><img src="images/massage.png" alt=""/>Масаж</a>
		</div>
	</div>

9
  • уберите в css все :hover
    – C.Raf.T
    1 ноя 2016 в 18:46
  • @C.Raf.T для чего?
    – amaymon
    1 ноя 2016 в 18:52
  • чтобы не дергалось...))
    – C.Raf.T
    1 ноя 2016 в 18:54
  • из-за высоты height: 130px; прыгает
    – soledar10
    1 ноя 2016 в 18:55
  • @C.Raf.T но..тогда ведь не будет вообще появляется картинка и расширяться ссылка :с
    – amaymon
    1 ноя 2016 в 18:56

2 ответа 2

0

Потому что надо 56 и 128, а не 55 и 130:

*,
*:before,
*:after {
  box-sizing: border-box;
}
.services{
  width: 980px;
}

.btn {
  display: inline-block;
  vertical-align: middle;
  /*padding: .5rem 1rem;*/
  text-transform: uppercase;
  color: #fff;
  background: #5b667a;
  text-decoration: none;
  margin: 36px 13px;
  height: 56px;
  width: 235px;
  padding-top: 18px;
  transition: height 1s linear, margin 1s linear;
}

.btn img {
  display: none;
}

.btn:hover img{
  display: block;
  margin: 12px auto;
}

.btn:hover{
  height: 128px;
  background: #6884ad;
  margin: 0 13px;
}

.otolaryngologist:hover{
  background: #ffcc29;
}

.row {
  text-align: center;
  overflow: hidden;
}

.left {
  width: 25%;
  float: left;
}

.right {
  width: 25%;
  float: right;
}

.center {
  width: 50%;
  float: left;
}

.center img {
  max-width: 100%;
  width: 100%;
  height: auto;
}
<div class="services">
		<div class="row">
		  <a href="#" class="btn pediatria"><img src="images/pediatria.png" alt=""/>Педіатрія</a>
		  <a href="#" class="btn therapy"><img src="images/therapy.png" alt=""/>Терапія</a>
		</div>
		<div class="row">
		  <div class="left">
		    <a href="#" class="btn otolaryngologist"><img src="images/otolaryngologist.png" alt=""/>Отоларинголог</a>
		    <a href="#" class="btn cosmetology"><img src="images/cosmetology.png" alt=""/>Косметологія</a>
		    <a href="#" class="btn mamology"><img src="images/mamology.png" alt=""/>Мамологія</a>
		    <a href="#" class="btn dietology"><img src="images/dietology.png" alt=""/>Дієтологія</a>
		    <a href="#" class="btn urology"><img src="images/urology.png" alt=""/>Урологія</a>
		    <a href="#" class="btn surgery"><img src="images/surgery.png" alt=""/>Хірургія</a>
		    <a href="#" class="btn usd"><img src="images/usd.png" alt=""/>Узд</a>
		    <a href="#" class="btn laboratory"><img src="images/laboratory.png" alt=""/>Лабораторія</a>
		  </div>
		  <div class="center">
		    <img src="http://cliparts.co/cliparts/yTk/Kz6/yTkKz6LAc.jpg" alt="">
		    <!--img src="images/human.png" alt=""/-->
		  </div>
		  <div class="right">
		    <a href="#" class="btn neurology"><img src="images/neurology.png" alt=""/>Неврологія</a>
		    <a href="#" class="btn dermatology"><img src="images/dermatology.png" alt=""/>Дерматологія</a>
		    <a href="#" class="btn cardiology"><img src="images/cardiology.png" alt=""/>Кардіологія</a>
		    <a href="#" class="btn traumatology"><img src="images/traumatology.png" alt=""/>Травматологія</a>
		    <a href="#" class="btn gynecology"><img src="images/gynecology.png" alt=""/>Гінекологія</a>
		    <a href="#" class="btn proctology"><img src="images/proctology.png" alt=""/>Проктологія</a>
		    <a href="#" class="btn manual_therapy"><img src="images/manual_therapy.png" alt=""/>Мануальна терапія</a>
		    <a href="#" class="btn physiotherapy"><img src="images/physiotherapy.png" alt=""/>Фізіотерапія</a>
		  </div>
		</div>  
		<div class="row">
		  <a href="#" class="btn massage"><img src="images/massage.png" alt=""/>Масаж</a>
		</div>
	</div>

2
  • Зачем вы пытаете людей этой конченной анимацией?
    – Sergey
    2 ноя 2016 в 6:11
  • @Sergey, да, анимация несколько недоделанная, вдумаю, автор сам разберётся.
    – Qwertiy
    2 ноя 2016 в 7:24
0

Поместите каждую кнопку в отдельный див. У такого дива будет относительное позиционирование, у кнопки - абсолютное. Затем, стилизируйте кнопку для hover - состояния с помощью transform: scaleY().

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.