Text when you hover over image

[Storm]

awarriorstory.proboards.com/

Hello! I want to hover over an image, have it go opaque, and then have text appear in the middle of the image. This is for the staff section in my banner. I am bad at coding and can't seem to figure it out.

Thank you very much!

[Sammiie]

You want like an overlay? Look at this site, click the "try it yourself" link and copy the code they have there exactly. Try not to change the class names if you don't have to (they're pretty confusing if you don't know what you're doing).

You can change the color hexes and width / size of the images to better fit your needs, but don't mess with the transitions too much!

If you need more specific help, tag me!

[Storm]

The link isn't working for me

[Sammiie]

Now?? Storm

[Storm]

Thanks! I like this one a lot: www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom

Where exactly would I put the CSS? I'm not too great with coding. Sammiie

[Sammiie]

You'd copy the CSS part (the one between the <style></style> tags) into your layout's Stylesheet (found in Admin > Themes > Advanced Styles & CSS). Scroll all the way to the bottom and paste this in:

.container {
 position: relative;
 width: 50px;
}

.image {
 display: block;
 width: 50px;
 height: auto;
}

.overlay {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: #008CBA; /* CHANGE THIS TO THE HEX CODE / COLOR YOU WANT */
 overflow: hidden;
 width: 50px;
 height: 0;
 transition: .5s ease;
}

.container:hover .overlay {
 height: 100%;
}

.text {
 color: white;
 font-size: 10px;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 text-align: center;
}

Once you've got that pasted & saved, go to your Layout Templates (Admin > Themes > Layout Templates > Forum Wrapper) and look / find (CTRL + F) for this:

<div style="padding:1px;"><img src="https://i.imgur.com/6mex7kY.png">
</div>

You'd replace that part with this:

<div class="container">
 <img src="https://i.imgur.com/6mex7kY.png" alt="Avatar" class="image">
 <div class="overlay">
   <div class="text">Name</div>
 </div>
</div>
</div>

Save. And you should be good! Any other staff you get, you can just double or triple the third coding snippet (the HTML) to copy over the overlay to anyone else's image. All you'd need to do is change the image!

Storm

[Storm]

Thank you so much Sammiie . That worked!

[Storm]

I take that back. Something weird happens whenever I add the CSS. The forum gets super skinny

[Lynx]

Most likely because of this part:

.container {
  position: relative;
  width: 50px;
}

.container is a class used by PB and that code snippet is setting the container width to 50px.

[Storm]

That would make sense. How can I fix it?

[Storm]

Wait, nevermind! I figured it out and everything seems to be working! Thanks for everyone's help

[Lynx]

Try changing that .container to a class name not used. For example, as long as the class .mycontainer doesn't already exist on your forum, you could try changing every aspect of .container to .mycontainer so the result would look like this:

CSS:

.mycontainer {
  position: relative;
  width: 50px;
}

.image {
  display: block;
  width: 50px;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA; /* CHANGE THIS TO THE HEX CODE / COLOR YOU WANT */
  overflow: hidden;
  width: 50px;
  height: 0;
  transition: .5s ease;
}

.mycontainer:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

HTML:

<div class="mycontainer">
  <img src="https://i.imgur.com/6mex7kY.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Name</div>
  </div>
</div>
</div>

I've highlighted the changes in red. See if that works for you.

[Storm]

Yep, that's what I did! Everything worked out! Thank you so much

[Lynx]

Glad you got it sorted!