Script in CSS to apply hover on many sibling classes (sharing string first part)-CodePudding

I need help to find the script to use hover on different classes sharing theirs string start like that ( i didn't copy img but it's a picture within the div by the .image_produit tag classes):

.image_produit1
{
    background: url('Pic1.jpg') no-repeat;
    background-position: center;
    background-size: contain;
    top: 0px;
}
.image_produit2
{
    background: url('Pic2.jpg') no-repeat;
    background-position: center;
    background-size: contain;
    top: 0px;
}
.image_produit:hover img
{
  visibility:visible;
}

CodePudding user response：

Here is what you are looking for and I don't recommend:

div {
    position: relative;
    width: 100px;
    height: 100px
}

div h1 {
    position: relative;
    z-index: 2;
    font-size: 15px;
    color: blue
}

div img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    visibility: hidden;
}

.image_produit1 {
    background: url('https://placekitten.com/200/200') no-repeat;
    background-position: center;
    background-size: contain;
    top: 0px;
}

.image_produit2 {
    background: url('https://placekitten.com/300/300') no-repeat;
    background-position: center;
    background-size: contain;
    top: 0px;
}

div[class^="image_prod"]:hover img {
    visibility: visible;
}

<div class='image_produit1'>
  <h1>Product A</h1>
  <img src="https://placekitten.com/100/100">
</div>

<div class='image_produit2'>
  <h1>Product B</h1>
  <img src="https://placekitten.com/100/100">
</div>

Here is the correct way to implement this:

.product {
    position: relative;
    width: 100px;
    height: 100px
}

.product h1 {
    position: relative;
    z-index: 3;
    font-size: 15px;
    color: blue
}

.product img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.product img.seconday {
    z-index: 2;
    visibility: hidden;
}

.product:hover img.seconday {
    visibility: visible;
}

<div class='product'>
  <h1>Product A</h1>
  <img src="https://placekitten.com/200/200">
  <img src="https://placekitten.com/100/100" class='seconday'>
</div>

<div class='product'>
  <h1>Product B</h1>
  <img src="https://placekitten.com/300/300">
  <img src="https://placekitten.com/100/100" class='seconday'>
</div>