Mouse Over Haze Effect HTML

[Dakota*]

Hi there! I was hoping someone could help me out (:
I am working on a custom page with various images, and would like it so the image is clear, but when you run the mouse over it, the image becomes sort of hazy with text over top. I can provide an example below, but if anyone knows how to code this in HTML, that would be fantastic! Thanks!

eg. From this:


To this when the mouse runs over the image:
(ignore the funny corners, this was my quick editing haha!)

[Alanna 🥀🖤]

Check this out: www.w3schools.com/css/css_image_transparency.asp

[Dakota*]

That worked great for the first part, thanks so much! But I'm having a difficult time figuring out how to put text over the image only when I run my mouse over it :S Sorry, I'm not the greatest with this haha!

[Alanna 🥀🖤]

Okay- well I can make you a quick mock up then, lol. The easiest way to do what you want is like so:

<div class="horse-container">
<div class="horse-content">Text here.</div>
</div>

<style>.horse-container { background-image:url('http://i58.tinypic.com/apbhu9.jpg'); height: 200px; width: 150px;}
.horse-content { background-color: rgba(255,255,255, 0.5); height: 180px; width: 130px; padding: 10px; border-radius: 25px; opacity: 0; }
.horse-container:hover .horse-content { opacity: 1; }</style>

[Dakota*]

Thanks, I'll give that a try!

[Dakota*]

Hey there again! I just got the chance to try this (sorry it took so long, it's been a busy week haha) and it's perfect, except it pushes everything down a line as if there is a <br> tag somewhere. I would like all of my images to be side-by-side as you can see here:
farpointstables.proboards.com/page/cardcollection
Except on the card I've used your code on (in the last section), it has pushed the other cards below it, when I would like them all one after the other. Could you let me know how to prevent that and keep it like the rest above it? Thanks!

[Alanna 🥀🖤]

Use tables to align them side by side. For example:

<table><tbody><tr><td>1 CARD CODE HERE</td><td>2 CARD CODE HERE</td><td>3 CARD CODE HERE</td><td>4 CARD CODE HERE</td><td>5 CARD CODE HERE</td></tr></tbody></table>

[Dakota*]

Okay, thanks!

Edit: Nooo! I have another problem now If you view the page, I tried the whole first set using your table and original code combined, but it doesn't change the image. The whole code looks like:

<table><tbody><tr><td><div class="horse-container">
<div class="horse-content">Collectots: n/a</div>
</div><style>.horse-container { background-image:url('http://i61.tinypic.com/b8wo47.png'); height: 200px; width: 150px;}
.horse-content { background-color: rgba(255,255,255, 0.5); height: 180px; width: 130px; padding: 10px; border-radius: 25px; opacity: 0; }
.horse-container:hover .horse-content { opacity: 1; }</style></td><td><div class="horse-container">
<div class="horse-content">Collectots: n/a</div>
</div><style>.horse-container { background-image:url('http://i62.tinypic.com/2aglnkl.png'); height: 200px; width: 150px;}
.horse-content { background-color: rgba(255,255,255, 0.5); height: 180px; width: 130px; padding: 10px; border-radius: 25px; opacity: 0; }
.horse-container:hover .horse-content { opacity: 1; }</style></td><td><div class="horse-container">
<div class="horse-content">Collectots: n/a</div>
</div><style>.horse-container { background-image:url('http://i58.tinypic.com/27ypbg5.png'); height: 200px; width: 150px;}
.horse-content { background-color: rgba(255,255,255, 0.5); height: 180px; width: 130px; padding: 10px; border-radius: 25px; opacity: 0; }
.horse-container:hover .horse-content { opacity: 1; }</style></td><td><div class="horse-container">
<div class="horse-content">Collectots: n/a</div>
</div><style>.horse-container { background-image:url('http://i59.tinypic.com/2cr3jg7.png'); height: 200px; width: 150px;}
.horse-content { background-color: rgba(255,255,255, 0.5); height: 180px; width: 130px; padding: 10px; border-radius: 25px; opacity: 0; }
.horse-container:hover .horse-content { opacity: 1; }</style></td></tr></tbody></table>


I did that for the top row, and as you can see none of the images are correct(it's supposed to look like the line of images below it) :/

Edit again: It is changing them to whatever the LAST photo I have coded. So right now it's the last group with the cup on the card, so it changes all of the cards with your code to that image as that is the last one with the code applied to it.

[Alanna 🥀🖤]

That is because you are using the same exact classes for each one... instead of the classes' just use inline styling instead. So instead of the previous code, use this: (it will enable you to change the background image of EACH one separately).

<div class="horse-container" style="background-image:url('http://i58.tinypic.com/apbhu9.jpg');">
<div class="horse-content">Text here.</div>
</div>

And this put this in your Style Sheet by going to Admin > Themes > Advanced Styles & CSS > Style Sheet:

.horse-container { height: 200px; width: 150px;}
.horse-content { background-color: rgba(255,255,255, 0.5); height: 180px; width: 130px; padding: 10px; border-radius: 25px; opacity: 0; }
.horse-container:hover .horse-content { opacity: 1; }

[Dakota*]

Oh, I actually found another way to do it that works Thanks so much for all of your help!