CSS3Triggering

hover: is not the only trigger for css3 transitions. Here we demo :active with a novel use of opacity property.

by Jacques Surveyer

HTML

<img src='http://picsofcanada.com/images/mowat.jpg' height='280'>
<div class='box'>
    <br>
    <br>
     <h2 style='text-align:center;'>Hover over changes color of the box.<br>Click and hold changes the opacity, size and  text color of the box.</h2>

</div>

CSS

.box {
    position:absolute;
    left:0px;
    top:0px;
    width: 400px;
    height: 300px;
    background-color: green;
    color: black,
    opacity: 1;
    -webkit-transition: width 2s ease, height 2s ease, opacity 3s;
    -moz-transition: width 2s ease, height 2s ease, opacity 3s;
    -o-transition: width 2s ease, height 2s ease, opacity 3s;
    -ms-transition: width 2s ease, height 2s ease, opacity 3s;
    transition: width 2s ease, height 2s ease, opacity 3s;
}
.box:active {
    width: 500px;
    height: 500px;
    color:white;
    opacity: 0.0;
}
.box:hover {
    background-color:blue;
}
}