Как добавить индивидуальный фон для каждого изображения?

Question

[xxxxxxx23]

Задумка: добавить несколько изображений на сайт, при наведении картинка меняется. И при таком коде ниже (он относится только к одному изображению), у меня background устанавливается один на вообще все изображения. В других кодах -к другим изображениям у меня меняются только ссылки. Как сделать так, чтобы background прикреплялся индивидуально, а не распространялся на все? (я так понимаю он распространяется на тег a) Что нужно изменить в коде? Напишите пожалуйста кодом ответ, а то я не программист)

<div class="alignleft post_thumbnail">
<a href="https://www." >
<img width="100%" src="https://">
</a>
</div>
<style>
.alignleft post_thumbnail {
background:none repeat scroll 0 0 #FFF;
}
.alignleft post_thumbnail > a {
    position:relative;
	display:block;
}
.alignleft post_thumbnail > a:before {
	display:none;
	content:'';
	position:absolute;
	top:0;
	left:0;
	object-fit: cover;
    width: 100%;
    height: 100%;
	background-size:contain;
	background-image: url('https://');
}
.alignleft post_thumbnail > a:hover:before {
	display:block;
}
</style>

Comments

[DIVSIDE]

Напишите пожалуйста кодом ответ, а то я не программист)

Это вам на фриланс тогда

[xxxxxxx23]

DIVSIDE, что вы имеете в виду?

[FeST1VaL]

так если вы не программист, то что вы тут делаете? зачем? если изучаете, то изучайте постепенно и найдете ответ, в крайнем случае поиск в гугл не заблокирован.

[DIVSIDE]

xxxxxxx23, FeST1VaL правильно всё ответил

так если вы не программист, то что вы тут делаете? зачем? если изучаете, то изучайте постепенно и найдете ответ, в крайнем случае поиск в гугл не заблокирован.

Тут не халявные ответы людей которые знают и решают конкретно вашу задачу. Тут подсказывают на то, что не получилось. А если вы не знаете, но пытаетесь, то вам на фриланс. Решать вашу задачу. За деньги.

[xxxxxxx23]

FeST1VaL, я не могу понять где ошибка в коде, мне на каком форуме задавать вопрос? врачу?

[DIVSIDE]

xxxxxxx23,

Что нужно изменить в коде? Напишите пожалуйста кодом ответ, а то я не программист)

Ты не знаешь CSS. Надо начать с того, что надо его выучить. А ты просишь готовое решение, а не подсказку.
Подсказка: Учи nth-child

[xxxxxxx23]

DIVSIDE, да я готова платить

[FeST1VaL]

xxxxxxx23, В коде нету ошибки. В следующий раз попробуйте разбить задачу на подзадачи, пока у вас не получится такая задача, которую нельзя уже разбить или не имеет смысла, для этого можно хоть на листочке записывать каждую задачку и каждую подзадачку гуглить.

Как и сказал DIVSIDE, тут очень редко дают готовые ответы, только если нечего делать кому то, особенно когда вопрос не вопрос, а задание, но на такие тоже отвечают, но все же лучше много раз попробовать что то сделать и объяснить что делали и как, тогда скорее всего помогут, хотя бы на уровне расписания порядка действий для достижения результата.

[xxxxxxx23]

FeST1VaL, благодарю вас

[Александр Васильев]

Добавляй бэк инлайном

Answer 1

[alexalexes]

Добавить какой-нибудь специфичности в селекторы, которые определяют фоновую картинку.
Например, по порядку следования тегов post_thumbnail (это точно тег, вы с классом не перепутали?):

.alignleft post_thumbnail:nth-child(1) > a:before {
	background-image: url('icon_1.png');
}
.alignleft post_thumbnail:nth-child(2) > a:before {
	background-image: url('icon_2.png');
}
.alignleft post_thumbnail:nth-child(3) > a:before {
	background-image: url('icon_3.png');
}

Или добавить индивидуальные классы тегам, добавляющие специфичность тега post_thumbnail:

.alignleft post_thumbnail.icon_1 > a:before {
	background-image: url('icon_1.png');
}
.alignleft post_thumbnail.icon_2 > a:before {
	background-image: url('icon_2.png');
}
.alignleft post_thumbnail.icon_3 > a:before {
	background-image: url('icon_3.png');
}

Comments

[DIVSIDE]

не надо давать готовое решение человеку, который явно пишет что ничего не умеет но ждёт готового решения

Напишите пожалуйста кодом ответ, а то я не программист)

[alexalexes]

DIVSIDE, все равно этот фрагмент CSS наобум не заработает. Нужно обдумать как работает nth-child, как добавить класс к тегам, как работают абсолютные и относительные ссылки в background-image.

[Сергей delphinpro]

DIVSIDE, а что надо ему давать? ссылку на обучающие курсы?

[DIVSIDE]

Сергей delphinpro, По-хорошему да