Fading Images?

[Star's Legacy]

Forum URL: shatteredalley.boards.net/

I have seen this on a few sites and I was wondering how they did it. They have images where if you put your mouse on it the image fades and produces some text. I have attached two images depicting what I am talking about.

Attachments:

[Alanna 🥀🖤]

Here's a simple hover over effect example. Place this HTML wherever you want it to appear on your forum (does not work in posts):

<div class="hover-container" style="background-image:url(http://placehold.it/100)">
<div class="hover-content">
Text.
</div>
</div>
And this at the bottom of the Style Sheet. Go to Admin > Themes > Advanced Styles & CSS and click on the Style Sheet tab:

.hover-container { width: 100px; height: 100px; background-size: 100%; background-position: center center; }
.hover-content { opacity: 0; }
.hover-container:hover { opacity: .9; }
.hover-container:hover .hover-content { opacity: 1; }

[Star's Legacy]

Is there a way to make the images clickable links? Also I have three images and they are currently stacked on top of each other, how do I separate them or move them to where they are in a horizontal line?

[David Clark]

Since this is a design-related thread I pushed it over to the Themes board.

Images can be made into clickable links by wrapping them in <a> tags, like so from Trinity's example above:

<a href="http://www.google.com"><div class="hover-container" style="background-image:url(http://placehold.it/100)"></a>

[Alanna 🥀🖤]

Nov 12, 2014 23:46:05 GMT -8 Star's Legacy said:

Is there a way to make the images clickable links? Also I have three images and they are currently stacked on top of each other, how do I separate them or move them to where they are in a horizontal line?

To put them side by side you can either stick them into a table or add display: inline; to the .hover-container class. For a table it would look like this:

<table width="100%">
<tbody>
<tr>
<td>
<a href="URL">
<div class="hover-container" style="background-image:url(http://placehold.it/100)">
<div class="hover-content">
Text.
</div>
</div>
</a>
</td>
<td>
<a href="URL">
<div class="hover-container" style="background-image:url(http://placehold.it/100)">
<div class="hover-content">
Text.
</div>
</div>
</a>
</td>
<td>
<a href="URL">
<div class="hover-container" style="background-image:url(http://placehold.it/100)">
<div class="hover-content">
Text.
</div>
</div>
</a>
</td>
</tr>
</tbody>
</table>
If you don't care for that, you can always just add the red to the follow CSS:

.hover-container { display: inline; width: 100px; height: 100px; background-size: 100%; background-position: center center; }