Использование CSS для отображения нескольких изображений с собственным изображением Rollover, используя виджеты изображе ⇐ CSS

[Anonymous]

Полный новичок (ну, почти)
Я пытаюсь добавить несколько изображений на страницу, используя виджет изображения для каждого из них, где каждое изображение говорится о продукте, а в переворот было бы увеличено в детальном изображении. Это два отдельных изображения, и друг написал мне этот код для выполнения одного изображения, и оно работает отлично. Их инструкция заключалась в том, чтобы ввести «Hover-Rollver» в качестве пользовательского класса в виджет, а затем добавить код в CSS.
У меня есть место, чтобы сделать обозначение для идентификатора виджета, который был бы уникальным для каждого экземпляра виджета, но чтение на различных сайтах говорит, что это будет лучше использовать пользовательские классы, и я не понимаю, что. Виджет. .hover-rollover {
/* 1) show the “detailed” image as the container background */
background-image: url("https://samplesite.com/backgroundimageurl.png");
background-size: contain; /* or “cover” if you prefer */
background-position: center;
background-repeat: no-repeat;
}

.hover-rollover img {
display: block; /* ensure it fills its container */
transition: opacity 0.3s ease; /* smooth fade */
}

.hover-rollover:hover img {
opacity: 0; /* hides the to reveal the background */
}
< /code>
Существует ли способ запустить ховер-переворот до нескольких различных виджетов, которые отображают изображение и рисунок «деталь», когда каждый из них завис? Код, который они мне прислали, работает красиво, теперь я хотел бы научиться сделать это с несколькими виджетами Umage на странице - или, может быть, даже несколько страниц ...
Заранее спасибо, я ценю ваше время в просмотре этого, и, как я говорю, я пытаюсь учиться!>

Подробнее здесь: https://stackoverflow.com/questions/796 ... ge-using-i