WellNo WellNo - 7 months ago 14
Javascript Question

Get a Text in center of a image, with Jquery

I have some images inside

<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


Now between the
<a>
and the
<img>
tag, is a
{{ $thema->thema }}
. This just gives me some Names of topics. Like: Gaming, Health etc.... Now I have this Jquery code for my pictures:

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


I've got this effect from this guy here:

But now I also want that if I enter the picture with my mouse, there also should be the name of the topic. So I need some Jquery code, that also gives me the topic and put it on the center of the picture while the opacity is on 50%.

I hope you all understood what I mean. My English isn't the best and I'm still learning Jquery.. So I need the right syntax for Jquery to get the text inside of the picture ( or Javascript/css solution )

How I did it before on a dirty css way:

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

Answer

I've created a snippet for you to demonstrate my solution. In my example, I use CSS and HTML without any JavaScript. This approach makes maintenance easier by keeping more of your design concerns in CSS. (Avoid styling and animation via JavaScript, if you can)

I used one of the common vertical centering techniques you can find here, but the process is: absolutely position a block 50% from the top of its container, then offset it up 50% of its own height using transform: translateY(-50%);.

Feel free to add your <a href="#" data-toggle="modal" data-target="#{{ $thema->id }}"> wrapper around the <figure> tags and insert your other template variables where you need them.

.img-wrapper {
  position: relative;
  display: inline-block;
}
.img {
  /* Change these as needed, everything else should resize appropriately */
  width: 275px;
  height: 228px;
}
.text-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  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;
}
.text {
  box-sizing: border-box;
  display: block;
  position: absolute;
  padding: 15px;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  color: black;
  vertical-align: middle;
  text-align: center;
  font-family: candara;
  font-size: 24px;
}

.img-wrapper:hover .text-wrapper {
  opacity: 0.8;
}
<figure class="img-wrapper">
  <img class="img" src="http://i.stack.imgur.com/XZ4V5.jpg" />
  <div class="text-wrapper">
    <figcaption class="text">some text</figcaption>
  </div>
</figure>
<figure class="img-wrapper">
  <img class="img" src="http://i.stack.imgur.com/OVOg3.jpg" />
  <div class="text-wrapper">
    <figcaption class="text">even more text than the last item so you can see how it flows</figcaption>
  </div>
</figure>