Как мне сделать приближение картинки при наведении в блоке, если я эту картинку добавляю серез css?

Question

[Andrew Ruwz]

Как мне сделать приближение картинки при наведении на нее, если я ее добавляю в блок через background: url(); ?
Есть свойство transform: scale, но его можно применять, если картинка добавлена через html верстку, но мне надо добавлять ее через css. Помогите пожалуйста.

.block-1{
    color: white;
    height: 300px;
    width: 1020px;
    border-radius: 10px;
    padding: 30px;
    background: url(../img/block4.svg);
}

<div class="block-1 effect">
                        <div class="block_title">AMD</div>
                        <div class="block_text">Lorem Ipsum is simply dummy text of the printing and <br> typesetting industry. Lorem Ipsum has been the industry's <br> standard dummy text ever since the 1500s.</div>
                    </div>

Comments

[Кирилл Никитин]

background-size?

[Ankhena]

Andrew Ruwz, вы можете менять bg size.
Можете задать фон псевдоэлементу, а ему уже transform.

[Антон Литвиненко]

Ankhena, сори, что лезу, не подскажите как задать фон псевдоэлементу, отнаследовав его от заданого инлайном в html родителю? через inherit почемуто не вышло

[Ankhena]

Антон Литвиненко, можно через кастомное и туда и туда.
bg image не наследуется.

[Антон Литвиненко]

Ankhena, не совсем понял. типа через дата-атрибут?

[Ankhena]

Антон Литвиненко,
<div style="--bgi: url()"></div>

div {
  background: var(--bgi) no-repeat;
}

div::after {
  background: var(--bgi) no-repeat;
}

[Антон Литвиненко]

Ankhena, Вот так как вы написали не получилось, а инхеритом получилось, спасибо, буду разбирать и ваш способ

<section class="home-hero section-dark" style="background-image: url(img/home-bg.jpg); background-size: 0px;">

.home-hero {
	padding: 130px 0;
	min-height: 97vh;
	background-size: 0px;
	position: relative;
	&::before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: inherit;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		z-index: -1;
	}
}

[Ankhena]

Антон Литвиненко, прелюбопытно.
В спеке написано, что не наследуются. Ну да ладно, если во всех актуальных браузерах работает, то и ладно.

Так с кастомными
https://codepen.io/AnnaSummer/pen/NWMKzZz

[Антон Литвиненко]

Ankhena, премного благодарен. я так понимаю, что если использовать относительный путь, то он будет такой, как если бы я его из css задавал, типа ../img/path-to

[Ankhena]

Антон Литвиненко, да