Приближение картинки при наведение на текст

@Towa73 · Регистрация: 13.07.2016

Author24 — интернет-сервис помощи студентам

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

HTML5

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

CSS

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

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

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

Адрес сайта https://csgosettings.ru/

@esculap_ra · 18.02.2020, 17:32

Сообщение от Towa73

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

Этот стиль отвечает за изменения размера картинки.
Чтобы реализовать это при наведении на текст, нужно использовать js

@Panda58dev · 18.02.2020, 17:32

Ссылка на мою вёрстку... там конечно немного отсебятины, но я вижу это так....
----------------------------------
вот только у меня ещё возник один вопрос... почему dev tools мне показывает вот это?!
Название: 2020-02-18_17-30-07.png
Просмотров: 54

Размер: 1.4 Кб

Название: 2020-02-18_17-30-07.png
Просмотров: 54

Размер: 1.4 Кб

я просто ещё ни разу не видел такого числа!

@Towa73 · 18.02.2020, 17:34 **[ТС]**

Кирилл848,
это ошибки на сайте?

Добавлено через 26 секунд
Кирилл848, Твой код увеличивает весь блок

Добавлено через 13 секунд
esculap_ra, Подскажите как?

@Panda58dev · 18.02.2020, 17:34

Сообщение от esculap_ra

Чтобы реализовать это при наведении на текст, нужно использовать js

Да через css можно же.

@Towa73 · 19.02.2020, 01:05 **[ТС]**

Кирилл848, Как?

@esculap_ra · 19.02.2020, 01:49

Сообщение от Кирилл848

Да через css можно же

Ну покажи как? Каким образом ховер на текст будет отвечать за ховер на картинку?

@Panda58dev · 19.02.2020, 08:28

Сообщение от esculap_ra

Каким образом ховер на текст будет отвечать за ховер на картинку?

пол минуты поиска)
получается что при такой вёрстке:

HTML5

1
2
3

<div class="all">
    <span class="span"></span>
</div>

нужно будет делать так: .all:hover .span {border: 3px solid #5700a6;}

при такой вёрстке:

HTML5

1 2	<div class="div1"></div> <div class="div2"><span></span></div>

можно сделать вот так: .div1:hover + .div2 span { border-radius: 50%;}

.block1:hover ~ .block2 a { color: green;}
block1 и block2 расположены не рядом, внутри одного блока. При наведении курсора мыши на block1 ссылка внутри block2 окрашивается в зеленый цвет.

jQuery изменение стиля элемента при наведении на другой

Javascript

<script>
$(function(){
    $('.block2').hover(
    function(){
        $('.block1').css('background', 'blue');
    },
    function() {
        $('.block1').css('background', 'red');
    }
    )
});
</script>

@Towa73 · 19.02.2020, 15:35 **[ТС]**

Кирилл848, только я до сих пор не могу догнать как мне это сделать на виде материалов ?

@Panda58dev · 19.02.2020, 15:42

Сообщение от Towa73

только я до сих пор не могу догнать как мне это сделать на виде материалов ?

нужно скачать и подключить jQuery (ссылка), как подключать я не знаю, т.к. никогда этой библиотекой не пользовался, но на ютубе, я уверен, роликов по этому поводу полно. И вставляем вот этот скрипт:

Javascript

<script>
$(function(){
    $('.класс на который наводят курсор').hover(
    function(){
        $('.класс который изменяется').css('background', 'blue');
    },
    function() {
        $('.класс который изменяется').css('background', 'red');
    }
    )
});
</script>

@Towa73 · 19.02.2020, 15:47 **[ТС]**

@Panda58dev · 19.02.2020, 15:55

Сообщение от Towa73

Твой код увеличивает весь блок

можно ещё конечно поиграться с transform: translateZ(100px);, но мне кажется это излишне.

Добавлено через 6 минут

Сообщение от Towa73

ну типо того, но esculap_ra, сказал, что нужно какое то другое свойство...
типа:

Javascript

1
2
3

function(){
$('img').css('max-width', '400px');
$('img').css('max-height', '400px');

мне кажется как то так, но лучше перенаправить эту тему в раздел по JS, т.к. я не знаю JS

@esculap_ra · 20.02.2020, 15:39

Javascript

$('span').hover(
function(){
  $('.player-images').addClass('big');
},
function(){
 $('.player-images').removeClass('big');
});

CSS

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

лучше присвоить id для span, иначе функция сработает на любом span

HTML5

1
2
3

 <div class="player-images"><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?else?><div class="player-noimages">Нет изображения</div><?endif?></div>
 <span id="span1">$TITLE$</span>
</div>

тогда

Javascript

$('#span1').hover(
function(){
  $('.player-images').addClass('big');
},
function(){
 $('.player-images').removeClass('big');
});

@Towa73 · 20.02.2020, 18:51 **[ТС]**

Есть проблемка, при использовании esculap_ra кода, возникает приближение всех картинок на сайте

@esculap_ra · 21.02.2020, 14:04

Сообщение от Towa73

возникает приближение всех картинок на сайте

HTML5

1
2
3

<div class="player-images" id="img-span1"><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?else?><div class="player-noimages">Нет изображения</div><?endif?></div>
 <span id="span1">$TITLE$</span>
</div>

Javascript

$('span').hover(
id = this.id;
function(){
  $('#img-'+id).addClass('big');
},
function(){
 $('#img-'+id).removeClass('big');
});

@Towa73 · 23.02.2020, 02:04 **[ТС]**

esculap_ra, Если зайдешь на сайт - https://csgosettings.ru/, то там увидишь что вид материалов он одинаковый для всех файлов

@esculap_ra 462 / 265 / 55 Регистрация: 22.08.2010 Сообщений: 1,204 Записей в блоге: 4
	18.02.2020, 17:32	2
	Сообщение от Towa73 .player-images:hover { transform:scale(1.05); transition: all .3s ease; } Этот стиль отвечает за изменения размера картинки. Чтобы реализовать это при наведении на текст, нужно использовать js 0

@Panda58dev Developer☭ 210 / 112 / 24 Регистрация: 01.02.2019 Сообщений: 505 Записей в блоге: 2
	18.02.2020, 17:32	3
	Ссылка на мою вёрстку... там конечно немного отсебятины, но я вижу это так.... ---------------------------------- вот только у меня ещё возник один вопрос... почему dev tools мне показывает вот это?! я просто ещё ни разу не видел такого числа! 0

@Towa73 0 / 0 / 0 Регистрация: 13.07.2016 Сообщений: 213
	18.02.2020, 17:34 [ТС]	4
	Кирилл848, это ошибки на сайте? Добавлено через 26 секунд Кирилл848, Твой код увеличивает весь блок Добавлено через 13 секунд esculap_ra, Подскажите как? 0

@Panda58dev Developer☭ 210 / 112 / 24 Регистрация: 01.02.2019 Сообщений: 505 Записей в блоге: 2
	18.02.2020, 17:34	5
	Сообщение от esculap_ra Чтобы реализовать это при наведении на текст, нужно использовать js Да через css можно же. 0

@Towa73 0 / 0 / 0 Регистрация: 13.07.2016 Сообщений: 213
	19.02.2020, 01:05 [ТС]	6
	Кирилл848, Как? 0

@esculap_ra 462 / 265 / 55 Регистрация: 22.08.2010 Сообщений: 1,204 Записей в блоге: 4
	19.02.2020, 01:49	7
	Сообщение от Кирилл848 Да через css можно же Ну покажи как? Каким образом ховер на текст будет отвечать за ховер на картинку? 0

@Towa73 0 / 0 / 0 Регистрация: 13.07.2016 Сообщений: 213
	19.02.2020, 15:35 [ТС]	9
	Кирилл848, только я до сих пор не могу догнать как мне это сделать на виде материалов ? 0

@Towa73 0 / 0 / 0 Регистрация: 13.07.2016 Сообщений: 213
	19.02.2020, 15:47 [ТС]	11
	<script> $(function(){ $('.player span').hover( function(){ $('.player-images').css(' transform:scale', '1.05'); } ) }); </script> что-то вроде этого? 0

@Towa73 0 / 0 / 0 Регистрация: 13.07.2016 Сообщений: 213
	20.02.2020, 18:51 [ТС]	14
	Есть проблемка, при использовании esculap_ra кода, возникает приближение всех картинок на сайте 0

@Towa73 0 / 0 / 0 Регистрация: 13.07.2016 Сообщений: 213
	23.02.2020, 02:04 [ТС]	16
	esculap_ra, Если зайдешь на сайт - https://csgosettings.ru/, то там увидишь что вид материалов он одинаковый для всех файлов 0