Hover Link w/ Color Fill

Responsive, suitable for any type of business, built for any needs elegant one-page Joomla template.
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Tue Sep 17, 2013 6:57 am
Reply with quote
Report this post
Hi,

How difficult would it be to make the color fill with the circular link icon over highlight work on a standard linked image? (Of same size as those in default News Show Pro GK5 module)

Thanks!
User avatar
Fresh Boarder

teitbite
Wed Sep 18, 2013 4:48 am
Reply with quote
Report this post
Hi

Can You please explain it a little better? Please show me an example of what You are trying to make.
User avatar
Moderator

GK User
Wed Sep 18, 2013 6:13 am
Reply with quote
Report this post
Hi,

If you look at the attached image, you'll see what I mean. the top tile shows what I would like it to look like when you highlight (like on the main page) and the bottom green tile shows the image that I would like to be effected with the onHover effect.


Thanks!
User avatar
Fresh Boarder

GK User
Thu Sep 19, 2013 1:47 am
Reply with quote
Report this post
evandguzman wrote:How difficult would it be to make the color fill with the circular link icon over highlight work on a standard linked image?

It´s as difficult as weak or as good as your css knowledge is ;) check out the html and css-classes structure of the wanted effect and adept it to your new images/needs.
User avatar
Fresh Boarder

teitbite
Fri Sep 20, 2013 4:01 am
Reply with quote
Report this post
Hi

I'm not sure if I understand, but I do not think You need any css changes. All You need to do is to replace images with the one You want in articles presented by NSP module. If You need to change the color of hover element please overwtite this class:

Code: Select all
.gkNspPM-Portfolio .gkImagesWrapper > a > .gkImgOverlay > span {
    background: none repeat scroll 0 0 #7484FF;
}
User avatar
Moderator


cron