Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Add on image when mouse an image

Featured Lock Resolved Issue
Hi i am trying using image gallery to have a mouse over effect.

I want a small opacity and a magnify icon to appear

i use the above code but only the opacity works

.sppb-gallery img: hover {
opacity:0.7;
}
.sppb-img-responsive:hover:after {
position: absolute;
top: 50%;
left: 50%;
margin:-24px 0 0 -24px;
display:block;
content: "";
width:48px;
height:48px;
background: url('http://e-synergein.eu/images/magnify_48_48.png') no-repeat;
}


my site url is http://e-synergein.eu/project-maximization-actions/nicosia-development-company/organization-of-events-anel
it might be helpful.

thanks in advance

6 Answers

Sifat - Staff

4 weeks ago #Permalink
Hi,
Thanks for your query. Please use this css into your custom css and that'll solve the issue.

.sppb-gallery li {
position: relative;
}
.sppb-gallery li:hover:after {
position: absolute;
top: 50%;
left: 50%;
margin:-24px 0 0 -24px;
display:block;
content: "";
width:48px;
height:48px;
background: url('http://e-synergein.eu/images/magnify_48_48.png') no-repeat;
}


-Best Regards

Tom

4 weeks ago #Permalink
Hi,
i use the code and seems to working fine but when the mouse goes upon the magnify image, the image isn't clickable.
Can we fix that?

Thanks again


Hi,
Thanks for your query. Please use this css into your custom css and that'll solve the issue.

.sppb-gallery li {
position: relative;
}
.sppb-gallery li:hover:after {
position: absolute;
top: 50%;
left: 50%;
margin:-24px 0 0 -24px;
display:block;
content: "";
width:48px;
height:48px;
background: url('http://e-synergein.eu/images/magnify_48_48.png') no-repeat;
}


-Best Regards

Sifat - Staff

4 weeks ago #Permalink
You can use this css to solve that too..

.sppb-gallery li:hover:after {
pointer-events: none;
}

Hope this will help you.

-Thanks

Tom

4 weeks ago #Permalink
You can use this css to solve that too..

.sppb-gallery li:hover:after {
pointer-events: none;
}

Hope this will help you.

-Thanks


Thanks, it is working fine

Sifat - Staff

3 weeks ago #Permalink
You are always welcome.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 122
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 90
Toufiq

Toufiq

Total Accepted Answers: 33
Pavel

Pavel

Total Accepted Answers: 3
Al Mamun

Al Mamun

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us