strange CSS webkit-transform-scale hover in Chrome -


i'm new coding, experienced on computer. on following website i'm creating enlarge-on-hover effect, written in css alone.

link: http://3514.linux3.testsider.dk/da/produkter/skumdetektorer if take in chrome @ 1st, 4th, 5th, 6th, 7th... images, have serious stacking/layer/priotrity problem on hover.

every browser worked fine 1 week ago, chrome started acting up...

i had same problem browsers @ first, later on fixed searching internet , found z-index setting answer 'page-priority' problem.

i tried searching every corner of internet, every word related subject, have found nothing.

following code used on site:

<style type="text/css">  .hovergallery img {     -webkit-transform:scale(1); /*webkit:scale down image 0.8x original size*/     -moz-transform:scale(1); /*mozilla scale version*/     -o-transform:scale(1); /*opera scale version*/     -webkit-transition-duration:0.5s; /*webkit:animation duration*/     -moz-transition-duration:0.5s; /*mozilla duration version*/     -o-transition-duration:0.5s; /*opera duration version*/     opacity:1; /*initial opacity of images*/     -webkit-perspective:1000;      -webkit-backface-visibility:hidden; }  .hovergallery img:hover {     -webkit-transform:scale(1.6); /*webkit:scale image 1.2x original size*/     -moz-transform:scale(1.6); /*mozilla scale version*/     -o-transform:scale(1.6); /*opera scale version*/     box-shadow:0px 0px 30px gray; /*css3 shadow:30px blurred shadow around image*/     -webkit-box-shadow:0px 0px 30px gray; /*safari shadow version*/     -moz-box-shadow:0px 0px 30px gray; /*mozilla shadow version*/     opacity:1; /*initial opacity of images*/     -webkit-perspective:1000;     -webkit-backface-visibility:hidden;     z-index:999; }     </style>

webkit-perspective: , webkit-backface-visibility: used stop images in chrome flickering on hover.

z-index: used overwrite pageholder-shadow priority (998 in right side of page), images goes on , not under on hover. see when viewing link in firefox or other browser...

try , add position:relative; .hovergallery img

.hovergallery img {     -webkit-transform:scale(1); /*webkit:scale down image 0.8x original size*/     -moz-transform:scale(1); /*mozilla scale version*/     -o-transform:scale(1); /*opera scale version*/     -webkit-transition-duration:0.5s; /*webkit:animation duration*/     -moz-transition-duration:0.5s; /*mozilla duration version*/     -o-transition-duration:0.5s; /*opera duration version*/     opacity:1; /*initial opacity of images*/     -webkit-perspective:1000;      -webkit-backface-visibility:hidden;     position:relative; }

Comments

Post a Comment

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more

php - Controller/JToolBar not working in Joomla 2.5 -

relevant code: jtoolbarhelper::custom('savecategories', 'save', '', 'save', false, false); ... <input type="hidden" name="controller" value="easyblogcontroller"> according can dig docs , own previous questions, should call savecategories() function in easyblogcontroller . i've tried setting value easyblog , easyblog.php (file name) current easyblogcontroller (class name). clicking on save button refreshes page. not redirect, echo or var_dump test code put in savecategories() function. var_dump ing jrequest::getvar('controller') , 'task' return correct values. creating controller object , using $controller->execute('task'); works. the values going depend on location of controller trying call, , have couple options here. typically there controller in base folder of component (likely components/com_easyblog) in file called controller.php , class name inside ...
Read more