My website is designed to display images in a table, but some of them are Stock Photos, so I need to indicate the source. I want the source to appear when the user hovers over the picture. For this purpose, I have assigned the source tag to a class (.PicSource) and given it { opacity 0; transition all .2s ease-in}. When hovering on the Picture (.ServPic), .ServPic:hover + .PicSource should make the source visible by changing the opacity to 1. However, the source text does not show up when I hover, and I cannot figure out why. Other hover-events are working perfectly fine on my website. The same method for hiding the caption while hovering works without any issues. Here's an example code snippet (the opacity of .PicSource should change to 1, but it doesn't, so you might need to adjust it manually to see the change)
.ServPic {
width: 350px;
height: 275px;
opacity: 0.5;
transition: opacity .2s ease-in;
}
.PicCapt {
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
transition: opacity .2s ease-in;
}
.PicSource {
position: absolute;
top: 0%;
left: 20%;
opacity: 0;
color : #000000;
transition: all .2s ease-in;
}
.ServPic:hover {
opacity: 1;
}
.ServPic:hover+.PicCapt {
opacity: 0;
}
.ServPic:hover+.PicSource {
opacity: 1;
}<table>
<tr>
<td>
<div>
<img class="ServPic" src="https://cdn.lrb.co.uk/blog/wp-content/uploads/2014/03/Lorem_Ipsum.jpg">
<a class="PicCapt">CAPTION</a>
<a class="PicSource">SOURCE.COM</a>
</div>
</td>
</tr>
</table>