I have images enclosed within <a></a> tags.
@foreach($themes as $thema)
<a href="#" data-toggle="modal" data-target="#{{ $thema->id }}">
<span class="text">{{ $thema->thema }}</span>
<img src="{{ $thema->picture }}">
</a>
@endforeach
Between the <a> and <img> tag, there is a {{ $thema->thema }}. This displays names of topics like Gaming, Health, etc. I have included JQuery code for my images:
<script type="text/javascript>
$(document).ready(function(){
$('a img').animate({
opacity:1
});
$('a img').hover(function(){
$(this).stop().animate({opacity:.5}, 'fast');
}, function(){
$(this).stop().animate({opacity:1}, 'fast');
});
});
</script>
This effect was inspired by another developer.
Now, I want to display the topic name in the center of the image whenever the mouse hovers over it while keeping the opacity at 50%. I need additional JQuery code or a JavaScript/CSS solution to achieve this.
Prior to this, I used a CSS workaround:
img {
margin-left: 5px;
width: 275px;
height: 228px;
}
.text {
margin-left: 5px;
position: absolute;
color: Black;
background-color: rgba(255, 255, 255, 0.8);
width: 275px;
height: 228px;
line-height: 228px;
text-align: center;
font-family: candara;
font-size: 24px;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: inline-block;
}
.text:hover {
opacity: 0.8;
}