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

More than a month 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

More than a month 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

More than a month 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

More than a month 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

More than a month ago #Permalink
You are always welcome.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 112
Sifat

Sifat

Total Accepted Answers: 112
Toufiq

Toufiq

Total Accepted Answers: 70
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 5
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

296484

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