This will apply to all images , you can add a extra class to the img element to limit it to those particular elements only.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hi. I would LOVE to have a slight scale on the image when hovering over it. Is there an easy way to achieve this? I tried this:
img{
transition:all 0.5s ease-in-out;
}
.img-zoom:hover img{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
but maybe I should link this script somehow to the image...
This will apply to all images , you can add a extra class to the img element to limit it to those particular elements only.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
img { transition: all 0.5s ease-in-out; } img:hover { -webkit-transform: scale(1.25); /* Safari and Chrome */ -moz-transform: scale(1.25); /* Firefox */ -ms-transform: scale(1.25); /* IE 9 */ -o-transform: scale(1.25); /* Opera */ transform: scale(1.25); }Thanks
ThemeNectar Support Team
Thanks Tahir. :-)