Image zoom

How can I replicate the effect of increasing artical image - when you hover the mouse cursor on it, as is done in this template. What is need to do for realize this feature in another template?

hi, it is CSS effect ....

in Css file - gk.stuff.css

Code: Select all

.nspArt .nspImageWrapper {
   border: none;

   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   padding: 0;
   background: #fff;
   overflow: hidden;
   display: inline-block;
   line-height: 1px;
}

.nspArt img {
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

.nspArt .nspImageWrapper:hover img {
   -webkit-transform: scale(1.2) rotate(-7deg);
   -moz-transform: scale(1.2) rotate(-7deg);
   -o-transform: scale(1.2) rotate(-7deg);
   -ms-transform: scale(1.2) rotate(-7deg);
   transform: scale(1.2) rotate(-7deg);
}


i think you also need to update some files in mod_news_pro_gk4.
Beacause you have to create a Wrapper for the image.
In the css exeample, wrapper is called nspImageWrapper:hover

if someone could explain us what files in mod_news_pro_gk4 we have to edit and how ...

ok i found it ...


first : change css properties with css code below in override.css

Code: Select all

.nspArt .nspImageWrapper {
   border: none;

   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   padding: 0;
   background: #fff;
   overflow: hidden;
   display: inline-block;
   line-height: 1px;
}

.nspArt img {
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

.nspArt .nspImageWrapper:hover img {
   -webkit-transform: scale(1.2) rotate(-7deg);
   -moz-transform: scale(1.2) rotate(-7deg);
   -o-transform: scale(1.2) rotate(-7deg);
   -ms-transform: scale(1.2) rotate(-7deg);
   transform: scale(1.2) rotate(-7deg);
}

second : Dowload latest version of Module 3.1.2.
this version include some modification on link class.

Code: Select all

<a href="'.$IMG_LINK.'" class="nspImageWrapper'.$class.'"'.$margins.'> ...

introduction of class nspImageWrapper

like i said earlier ...

Hello, I have a problem to do the zoom effect in the modules... How I do?