CSS Transition lightbox effect
CSS Transition property tests.
Inspired by http://www.youtube.com/watch?v=3ikye7Qc7Ak
HTML
<div class="lightbox block">
<span class="label label-info">Hover me...</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi vero hic ipsum ab doloremque libero veritatis vitae exercitationem minus quidem facere laboriosam pariatur. Quas atque dolorum iure quos delectus ullam!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
Credits to <a href="http://www.youtube.com/watch?v=3ikye7Qc7Ak">Lea Verou's talk</a> for this one.
</p>
</div>
<div class="lightbox block">
<span class="label label-info">Hover me...</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi vero hic ipsum ab doloremque libero veritatis vitae exercitationem minus quidem facere laboriosam pariatur. Quas atque dolorum iure quos delectus ullam!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
Credits to <a href="http://www.youtube.com/watch?v=3ikye7Qc7Ak">Lea Verou's talk</a> for this one.
</p>
</div>
CSS
.block {
text-align: justify;
float: left;
background-color: #DDD;
border: 2px black solid;
border-radius: 10px;
}
.lightbox {
width: 90px;
height: 20px;
padding: 5px;
overflow: hidden;
-webkit-transition: 1s height, 1s 1s width;
transition: 1s height, 1s 1s width;
}
.lightbox:hover {
width: 300px;
height: 220px;
-webkit-transition: 1s width, 1s 1s height;
transition: 1s width, 1s 1s height;
}
JavaScript
// No javascript for this one, see other panels