Bagaimana untuk menyekat CSS untuk hanya berkuat kuasa pada satu div dalam kategori yang sama

Question

Saya cuba membuat tajuk muncul di atas imej pada tetikus, tetapi semuanya mesti mempunyai kelas yang sama. Saya tidak tahu sama ada apa yang saya minta adalah mungkin, tetapi saya akan mempertimbangkan pelbagai penyelesaian yang berbeza. Ini kod semasa saya.

<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>

Ini kod CSS saya

.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

Saya hanya perlu menukar kedudukan kepada relatif, ini adalah kod saya

.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;
}