Changing the Hover propery on phoca gallery image

Phoca Gallery - image gallery extension
zervas
Phoca Newbie
Phoca Newbie
Posts: 5
Joined: 15 Jan 2017, 14:44

Changing the Hover propery on phoca gallery image

Post by zervas »

I'd like to know how to change the :hover property of an image of phoca-gallery . Which class do I have to modify ?

In addition, I'd like to know if I could change the zoom property when I user clicks on my images ( I mean make images seem a little bit bigger when a user clicks on my images ).



Thank you in advance
christine
Phoca Hero
Phoca Hero
Posts: 2710
Joined: 28 Nov 2010, 17:20

Re: Changing the Hover propery on phoca gallery image

Post by christine »

Hi,

1. it depends if you mean categories view or category view.

examples could be:

Code: Select all

.pg-cv-box:hover {
    background: blue;
}
.pg-csv-box:hover {
    background: #fafafa;
}
2. have a look please to options etc: https://www.phoca.cz/documents/2-phoca-g ... e-joomla-3
e.g. > Images And Detail Window Size Settings and/or different > Detail View settings.

Kind regards, Christine
zervas
Phoca Newbie
Phoca Newbie
Posts: 5
Joined: 15 Jan 2017, 14:44

Re: Changing the Hover propery on phoca gallery image

Post by zervas »

I have created a photo gallery and I just want to change the :hover attribute. I mean when the user mouse is over an image , the background-color changes . how can I do this ?


I have made a rule in the phocagallery.css (in the main folder)

Code: Select all

#phocagallery :hover /*custom*/
{
background-color:#CCC;
}
but it didn't work
christine
Phoca Hero
Phoca Hero
Posts: 2710
Joined: 28 Nov 2010, 17:20

Re: Changing the Hover propery on phoca gallery image

Post by christine »

Hi,
your syntax is wrong:
#phocagallery :hover /*custom*/
{
background-color:#CCC;
}
correct:
#phocagallery :hover {
background-color:blue;
}
or in this way (from #ccc to blue):

Code: Select all

#phocagallery :hover {
background-color: /*#CCC;*/blue;
}
Kind regards, Christine

OT: hv deleted the other (similar) post.
christine
Phoca Hero
Phoca Hero
Posts: 2710
Joined: 28 Nov 2010, 17:20

Re: Changing the Hover propery on phoca gallery image

Post by christine »

Hi,
My syntax is wrong because of '{' ? I don't understand why
This was wrong:
#phocagallery :hover /*custom*/
{
background-color:#CCC;
}
btw: it was your code, therefore I thought, you wanted to hover complete thumbnail.

Try please my code (previous post). Storing at the end of e.g. template.css or custom.css

Code: Select all

.pg-cv-box:hover {
    background: blue;
}
.pg-csv-box:hover {
    background: blue;
}
as I wrote, it depends if you mean category or categories view.

If not successfull, just show us your URL :-)

Kind regards, Christine

Something went wrong with the answer. (your post has been lost during my edition) I don't know why. Sorry about.
zervas
Phoca Newbie
Phoca Newbie
Posts: 5
Joined: 15 Jan 2017, 14:44

Re: Changing the Hover propery on phoca gallery image

Post by zervas »

You're a phoca expert. I've put your code into my custom css (named user.css under the category template/protostar/user.css )

but I'd like to ask you a couple of questions regarding your code .

.pg-cv-box:hover , .pg-csv-box:hover

.pg-cv-box:hover (this code affects the :hover attribute of .pg-cv-box ) .

.pg-cv-box (does it refer to my thumbnails ? )

and about the code .pg-csv-box ? (does it refer ro my thumbnails as well ? )

In conclusion, I'd like you to clarify these two classes .

You were helpful
christine
Phoca Hero
Phoca Hero
Posts: 2710
Joined: 28 Nov 2010, 17:20

Re: Changing the Hover propery on phoca gallery image

Post by christine »

Hi zervas,

it depends, if you want to have some effect either in categories view or in category view or in both.

Just try foll. example in your user.css (at the end):

Categories View: (List of categories)
for hover effect:

Code: Select all

.pg-csv-box:hover {
    background: blue;
}
not hover effect (active):

Code: Select all

.pg-csv-box {
background-color:red;	
}
for Category View: (List of files/images)
for hover effect:

Code: Select all

.pg-cv-box:hover {
    background: blue;
}
not hover effect (active):

Code: Select all

.pg-cv-box {
background-color:red;	
}
Kind regards, Christine
Post Reply