Toggling text visibility using jQuery - Stuck!

1

Hi all,

I’m fairly new to the coding world and am currently working on my tribute page. I know that the assignment is fairly simple and requires an image with related text. Easy enough, but I’d like to spice mine up a bit more.

I want to have an image that, when the user hovers over it, will reduce the image opacity and have text appear over the image. I can successfully reduce the opacity but 1) Am having difficulty position caption text directly over the image and b) using jQuery to toggle the visibility.

I don’t know if I am biting off more than I can chew at my level, but now that I’ve started I am determined to solve this!! Here’s a link to my Codepen, or I can link the code in the comments.

The tribute page is looking a bit rough right now, but I’d like to work out the functionality before spicing it up a bit more.

Thanks!

-Jnelli

2

I opened your pen and I saw that you were missing quotes in your jQuery. So, you may wanna comb through the lines first and make sure your classes and IDs are in the right places. Good luck :slight_smile:

3

And when you’re done, peep this pen I made that only uses CSS, no jQuery needed.

4

First of all, I wanna say great topic for your tribute! My sister is a huge fan of Monster Factory and the McElroy brothers :grin:

Honestly you don’t need jQuery. Mini error:
you have the following CSS to style the image caption:

#amiibo-caption {
  position: absolute;
  top: 100px;
  left: 30px;
  width: 40%;
}

But it your HTML the h2 has a class not and ID of amiibo-caption so the css selector would be .amiibo-caption

Here’s a forked pen:

I changed the html a bit to make targeting the box easier (Gave the containing box an ID of amiibo-box)

<div id="amiibo-box" class="col-xs-4">
  <img id="amiibo" src="https://static.giantbomb.com/forum/uploads/scale_small/0/1992/2862592-screen+shot+2016-06-16+at+12.33.23+am.png"
   title="Griffin struggles to fit an Amiibo in his mouth.">
  <h2 class= "amiibo-caption"> "Quote here from Griffin's Amiibo Corner."</h2>
</div>

And here’s the CSS

#amiibo {
  max-width: 50%;
  min-width: 200px;
  transition: .5s;
}

#amiibo-box h2{    
  position: absolute;
  top: 0;
  opacity: 0;
  transition: .5s;
  font-size: 1.5em;
  padding: 1em;
  max-width: 50%;
  min-width: 200px;
}
#amiibo-box:hover img{
  opacity: 0.5;
}
#amiibo-box:hover h2{
  opacity: 1;
}

Lil tip: You can’t animate between visibility: hidden and visible but you can animate opacity!

5

I use this site to help remember and discover new usage for jQuery.

6

As a beginner I find it tough to remember the syntax for everything. Thanks for the cheat sheet!

7

I’m a big fan of the McElroy brothers as well, and though I would make my tribute page a little bit more goofy :slight_smile:

Thanks so much! I have a much better understanding of how all of this works. I was told that this was possible in jQuery, hence me thinking that was the solution to follow.