Comment restreindre CSS pour qu'il ne prenne effet que sur un seul div dans la même catégorie

Question

J'essaie de faire apparaître le titre sur l'image au survol de la souris, mais ils doivent tous avoir la même classe. Je ne sais pas si ce que je demande est possible, mais j'envisagerais différentes solutions. C'est mon code actuel.

<div class="item">
            <img class="Placeholderimg" src="placeholder.jpg">
            <div class="hovershow1">
                <div class="title">
                    Testing1
                </div>
            </div>
        </a>
    </div>
    <div class="item">
        <img class="Placeholderimg" src="placeholder.jpg">
        <div class="hovershow2">
            <div class="title">
                Testing2
            </div>
        </div>

Voici mon code CSS

.item{
    height: 156px;
    width: 156px;
}

.Placeholderimg{
    height: 156px;
    width: 156px;
    border-radius: 10px;
}

.hovershow1{
    visibility: hidden;
    position: absolute;
    top:0;
    height: 156px;
    width:156px;
    background-color: rgba(40, 40, 40, 0.4);
    border-radius: 10px;
}

.item:hover .hovershow1{
    visibility:visible;
}

.hovershow2{
    visibility: hidden;
    position: absolute;
    top:0;
    height: 156px;
    width:156px;
    background-color: rgba(40, 40, 40, 0.4);
    border-radius: 10px;
}

.item:hover .hovershow2{
    visibility:visible;
}

Answer 1

J'ai juste dû changer la position en relatif, voici mon code

.item{
    height: 156px;
    width: 156px;
}

.Placeholderimg{
    height: 156px;
    width: 156px;
    border-radius: 10px;
}

.hovershow{
    visibility: hidden;
    position: relative;
    height: 156px;
    width:156px;
    background-color: rgba(40, 40, 40, 0.4);
    border-radius: 10px;
}

.item:hover .hovershow{
    visibility:visible;
}