here how scale image on hover:
img { transition: 0.25s ease; } img:hover { transform: scale(0.75); transition: 0.25s ease; } here how cross fade 2 images:
#cf { position:relative; margin:0 auto; } #cf img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img.top { -webkit-transition: opacity 1s ease-in-out; -webkit-animation: fade 5s infinite; } @-webkit-keyframes fade { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} } https://jsfiddle.net/1n279ct8/
and here when attempt combine two:
https://jsfiddle.net/h453xaav/
ouch! it's treating "top" layer hoverable.
this behaviour absolutely makes sense me, but, frustratingly, can't see elegant workaround.
is possible in pure css, or time me break out javascript?
thank in advance :-)
p.s. i've kept code simple possible. in actual work use ids , classes , cases different browsers, cut bit of out here purposes of conveying possible mean. first post here, i'm not sure house style. please let me know if i'm supposed make "complete" or "proof of concept" message across :-)
p.p.s. if way i'm doing css of these 2 effects incorrect or "dodgy" please let me know!
you can't hover 2 instances @ same time, can hover single element, , parents (not siblings).
a work around can wrap both images within div (think of parent element). scale contents of div.
the result can seen in fiddle below:
#wrap:hover { transform: scale(0.75); -webkit-transform: scale(0.75); transition: 0.25s ease; } #wrap { position: relative; transition: 0.25s ease; background: red; /* remove colour, show div shrinking*/ width: 292px; /* needs defined */ height: 291px; } img.top { position: absolute; left: 0px; -webkit-transition: opacity 1s ease-in-out; -webkit-animation: fade 5s infinite; transition: 0.25s ease; } @-webkit-keyframes fade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }<div id="wrap"> <img class="bottom" src="http://i.imgur.com/qiupijw.png" /> <img class="top" src="http://i.imgur.com/iaulhar.png" /> </div>