Image hover effect

Hello i have checked the newsletter: GavickPro templates and EasyBlog team-up
I saw the updated demos and i want to have the same image hover effect on my NEWS template with easyblog.
Can you tell me please how can i achive that or this has to do with easyblog files?

Could you create a screenshot of exactly which hover effect you are referring to?

I'm talking about the zoom effect that exists on NEWS template

The zoom effect is a standard effect and was implemented into "news" template long before current update.
Could You please post an url to your site so I can check why it might not work on your site?

Sorry maybe i was not very specific. It works fine with joomla and k2 articles but i want to put this effect on easyblog as you did with (M) Social, Music State and Game
Here is an example http://demo.gavick.com/joomla25/musicst ... log-layout

If you update template to the newest version you will find additional folder inside of template/html folder that adds additional css files for budypess - those css files creates mentioned effect.

NEWS template doesnt inculde those files, only those 3 mentioned before. But the only thing i want to change is adding the effect and now change the whole template of easyblog

Currently this kind of modification is beyond our support.
I can only point you into the right direction...

Code: Select all

.nspArt h4.nspHeader a:active,
.nspArt h4.nspHeader a:focus,
.nspArt h4.nspHeader a:hover { color: #eb592a }
.nspArt a {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.nspArt img.nspImage {
    border: none;
   
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.nspArt img.nspImage:hover {
    -webkit-transform: scale(1.15) rotate(-1.5deg);
    -moz-transform: scale(1.15) rotate(-1.5deg);
    -ms-transform: scale(1.15) rotate(-1.5deg);
    -o-transform: scale(1.15) rotate(-1.5deg);
    transform: scale(1.15) rotate(-1.5deg);
}
.nspArt .nspImageWrapper { overflow: hidden }


this css code is used to make this effect work in nsp. What you would need to do is to find correct easyblog selectors and use override.css to make it work.

Thank you, far too kind

If you will have problem implementing this code and will be able to share link to a place where problem lies, I'll be able to check whats wrong and give you some more tips.

I did it after some time. I just saw the GK team styles.css for easyblog and emplemented the code on my easyblog template styles.css and that was all.
Thanks again for pointing me to the correct direction

I attach my style.css in case that someone else wants to do the same. Just have in mind that this modification is on the Default Easyblog template

Thanks for the share.
From my point of view, using override.css would be easier when you decide to update the template

Actually i edited this css file and placed it on template/html/com_easyblog/css folder to avoid the loss in case of updates

Ok. Regarding the solution, I always advice to make backup before of template/theme before updating.