How to have css only affect one div of the same class

Question

I am trying to make a title appear over an image when you hover over it, but they both have to have the same class. I have no clue what I am asking is even possible or not, but I would consider a variety of different solutions. This is what I currently have.

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

This is my 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;
}

Don't really understand what you are asking, but from the look of the code i guess just add `position: relative` to class `item` and it will solve your problem? — Eezo, Dec 06 '22 at 02:33
@HenryVarro Yes thank you I didn't really know how to word it, but this fixed my problem! Thank you very much! — Kainen Heller, Dec 06 '22 at 02:40

score 0 · Answer 1 · answered Dec 06 '22 at 02:43

I just had to change the position to relative, this is my code now

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

How to have css only affect one div of the same class

1 Answers1