<div class="pic">
<img src="image.jpg" height="250"/>
<span class="text" style="display:none">text here</span>
</div>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$('img').css('opacity', 0.4);
$('img').next('span.text').show();
$('img').bind('mouseover', function () {
$(this).css('opacity', 1.0);
$(this).next('span.text').hide();
});
$('img').bind('mouseout', function () {
$(this).css('opacity', 0.3);
$(this).next('span.text').show();
});
</script>
There is an image in which opacity changes on mouseover, along with text that appears and disappears accordingly. The issue arises when attempting to center the text using CSS but not achieving desired results. Is there a method to center the text while maintaining opacity effects and mouse events? Would utilizing Javascript provide a better solution?
Thank you.