How to Add Glare effect to thumbnails How to Add Glare effect to thumbnails
 

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Main Menu

How to Add Glare effect to thumbnails

Started by vrianlife, May 18, 2013, 10:06:57 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

vrianlife

I would like to know how to get my thumbnails to show this glare on my thumbnails. I know its to images with the glare but how do I set it up? What code do I put? How do I place it and where?


EX. http://ultimate-rbd.org/gallery/

Thanks I appreciate the help

vrianlife

I've noticed that a few have seen but not answered anything. Possibly I didn't explain correctly.

Is there a way that I can add an overlay image to the thumbnails? One that changes when hovered over?

I tried searching for this but have found anything.

Thanks I would appreciate the help.

Andre? lol

Niecher

#2
1.- Include these lines in your CSS file:

.crystal-effect{
display: block;
position: absolute;
background-image: url(images/thumbs01.png);
background-repeat: no-repeat;
width: 88px;
height: 98px;
margin-left: 8px;
}
.crystal-effect:hover{
background-image: url(images/thumbs02.png);
}
.crystal-effect:active{
background-image: url(images/thumbs03.png);
}


- Crystal thumbs files you should put in your images folder of your theme: thumbs01.png, thumbs02.png and thumbs03.png.
- You must customize the size of the thumbs glass effect, according to the size of your thumbnails in your gallery.
- Using Photoshop you can get different glass effects.

2.- Edit your themes.inc.php

Find the section:
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/


In this section find the line:
<a href="{LINK_TGT}">{THUMB}<br /></a>

Replace the previous line for this one:
<a href="{LINK_TGT}"><span class="crystal-effect"></span>{THUMB}<br /></a>


Hope this helps you to put the thumbs glass effect in your gallery.

vrianlife