I have been working on creating a unique image gallery effect using Masonry layout where the images start at 0.2 opacity and change to full opacity of 1 when hovered over. Additionally, I want each image to fade to 0.7 opacity with text "Petra, Jordan" appearing when it is activated (:active state).
Although everything is functioning as intended, I am struggling with implementing the text display part. Can anyone provide insights on how I can achieve this using CSS or JavaScript? Your help is much appreciated.
<article class="bottomcontent">
<h2>Visuals</h2>
<section id="photos"></section>
</article>
<script>
$(document).ready(function() {
$('#photos').append(
'<img src="/visuals/visuals1.jpg" alt="Petra, Jordan"/>',
'<img src="/visuals/visuals2.jpg" alt="img02"/>',
// Insert remaining image sources here...
);
}
);
</script>
CSS:
#photos img {
width: 100% !important;
height: auto !important;
opacity: 0.2;
filter: alpha(opacity=20);
}
#photos img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
#photos img:active {
opacity: .5;
}