How to maintain hover ability on scaling css3 rollover images.

-

hi all,

 

i'm having issue of images in muse. here's situation:

 

i have multiple images want scale when rollover them. started 300px 300px images, , placed them html objects in muse uploading them flickr , pasting direct link. in turn created 300px 300px minimum frame around objects. far, good.

 

i used -webkit transforms scale object 0.2 default. set css in "metadata" section page wanted effect used on. set scale 1 on hover. creates nice scaling effect without image blur, interpolation, or degradation.

 

the problem have multiple images (which have same hover effect) within 300px border, , won't scale since technically there invisible wall in front of neighboring object. potential problem i've yet address if hover effect working on neighboring object, i need dynamically change z-index other objects don't obscure image being hovered on.

 

html:

 

<div class="portrait">

<img src="http://farm4.staticflickr.com/3728/9576243835_20aa7bac89_o.png" width="300" height="300" alt=""/>

</div>

 

css:

<style type="text/css">

.portrait {

          -webkit-transition: 1s ease-in-out;

          -moz-transition: 1s ease-in-out;

          -ms-transition: 1s ease-in-out;

          -o-transition: 1s ease-in-out;

          transition: 1s ease-in-out;

          -webkit-transform: scale(.2);

       -webkit-filter: grayscale(1);

}

.portrait:hover {

          -webkit-transform: scale(1);

       -webkit-filter: grayscale(0);

}

</style>

 

 

any thoughts?

 

thanks in advance!

here picture illustrating problem in muse viewport. can see how frames overlap. disables other objects hover capability.

problem.jpg



More discussions in Help with using Adobe Muse CC


adobe

Comments

Post a Comment

Popular posts from this blog

Adobe Acrobat Pro , Terminal Server Use

-
hello,   a fellow employee requires adobe acrobat pro installed use, , management me have sorted out. employee uses thin client connect terminal server of administration work.   i require single license adobe acrobat pro used single user.   will there license issues installing adobe acrobat pro on terminal server?   can install adobe acrobat pro on terminal server?   thanks, david hi david,   yes, can install acrobat terminal servers... !   the licensing terminal server considered normal licensing process, means need buy many number of licenses acrobat number of users accessing terminal server (like citrix) access software. eg if 10 users accessing citrix server @ particular time use acrobat software need 10 licenses same. More discussions in Installing, Updating, & Subscribing to Acrobat adobe
Read more

Thread: transmission-daemon isn't playing nice: "409: Conflict"

-
409: conflict request had invalid session-id header. fix this, follow these steps: when reading response, x-transmission-session-id header , remember it add updated header outgoing requests when 409 error message, resend request updated header requirement has been added prevent csrf attacks. error occurs when apache not running. i've tried zillion different proposed solutions involving rewriterules , proxypasses golly i'm clueless. me? following apache thing, y'know, in case. code: <virtualhost *:80> rewriteengine on documentroot /var/www <directory /> options followsymlinks allowoverride none </directory> <directory /var/www/> options indexes followsymlinks multiviews allowoverride none order allow,deny allow </directory> scriptalias /cgi-bin/ /usr/lib/cgi-bin/ <directory "/usr/lib/cgi-bin"> allowov...
Read more

Thread: gpg: Conflicting Commands

-
Image
hi, relatively new linux (have used many live disks) , have had install of ubuntu 12.04 few days now. part have found easy use , have been comfortable it. have first question can't resolve myself: adding googles repository list. when first ran command supplied google found did not have wget installed. used apt-get install it. worked fine (as far can tell) re-ran googles code : wget -q https://dl-ssl.google.com/linux/linux_signing_key.pub -o- | sudo apt-key add -deb http://dl.google.com/linux/deb/ stable non-free , message 'gpg: conflicting commands' tell me going wrong , how fix please new script : wget -q https://dl-ssl.google.com/linux/linux_signing_key.pub -o- | sudo apt-key add linux_signing_key.pub need edit /etc/apt/sources.list , add line @ end deb http://dl.google.com/linux/deb/ stable non-free end hope find usefull edit: need root or use sudo make changes /etc/apt/sour...
Read more