Question

Имеется вид материалов

<div style="width:20%; float:left;"> 
<div class="player-block">
<a href="$ENTRY_URL$" title="Настройки $TITLE$">
<div class="player">
 <div class="player-images"><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?else?><div class="player-noimages">Нет изображения</div><?endif?></div>
 <span>$TITLE$</span>
</div>
</a>
</div>
</div>

 

.player-block {
 margin-top: 43px;
}

.player {
 float: left;
 position: relative;
 display: inline-block;
}

.player span{
 color: #000;
 position: relative;
 display: inline-block;
 text-decoration:none;
 font-size:17px;
 font-family: "PT Sans";
 font-weight: normal;
 padding-top: 11px;
 text-align: center;
 width: 200px;
}

.player-images {
 height: 200px;
 width: 200px;
 margin-right: 10px;
 border-radius: 100%;
 position:relative;
 overflow:hidden;
 transition: all .3s ease;
}

.player img{
 bottom:0;
 display:block;
 height:auto;
 left:0;
 margin:auto;
 position:absolute;
 right:0;
 top:0;
 width:100%;
}

.player-images:hover {
 transform:scale(1.05);
 transition: all .3s ease;
}


В данном варианте имеется увелечение картинки при наводке на неё, но если навести на текст, то увелечение не срабатывает.

Возникает вопрос. Как сделать, чтобы при наведение и на картинку, и на текст изображение могло увеличиваться.

Answer 1

Сделайте как пример так:

.player:hover { transform:scale(1.05); transition: all .3s ease; }

Comments

Попробовал, но в таком случае увеличивается и текст под картинкой

---

Админ CSGOSETTINGS.ru,

Вы прочтите свой вопрос выше и описание:

В данном варианте имеется увелечение картинки при наводке на неё, но если навести на текст, то увелечение не срабатывает.

вам предложили решение, и вам уже это не нравится)) Если так не нужно, тогда не используйте это решение вообще. И да, текст не увеличивается, а как-бы приближается по той анимации которая прописывается стилями.

---

Yuri_Geruk,

Да, я соглашусь это моя ошибка, я не до конца описал свой вопрос.

Хотелось бы, чтобы при наведение на текст или картинку выполнялось приближение лишь изображения, а текст оставался на своем месте без изменения. Спасибо!

---

Админ CSGOSETTINGS.ru,

Хотелось это одно, а приближение так сделать не получится. Приближать получится либо блок в целом либо никак (отдельные части).

---

Yuri_Geruk,

Возмонжно ли, что существует другое решение без использование transform:scale(1.05);? 
 

---

Админ CSGOSETTINGS.ru,

Если бы я знал такое решение, подсказал бы.