I got transitions to work using a simple hover, but how do i make them respond to onclick?
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>Jump to PostYou would probably have to do it with JS, something like
<html> <head> <script language="javascript"> function transition(){ document.getElementById('trans').style.opacity = 0; } </script> <style> #trans { opacity:100; transition: all 1st ease-in-out; } </style> </head> <body> <img src="myimage.jpg" id="trans" onclick="transition()" /> </body> </html>Didn't test it
You would probably have to do it with JS, something like
<html>
<head>
<script language="javascript">
function transition(){
document.getElementById('trans').style.opacity = 0;
}
</script>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" onclick="transition()" />
</body>
</html>Didn't test it
Thanks!
Actually this only seems to work for properties without types, like opacity and whatnot. Things like position and size, marked in pixels or ems dont seem to work.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.