Geronimo89.dk

A blog about me, my doings and everything I think deserves attention.

CSS3 Close Up: transition

Hello everybody, I want to share a little technique with you that I used at a school project this week, the CSS3 transition feature.

Check out demo

Tested in:

  • Firefox 4 beta
  • Safari 5
  • Chrome 6 & 7

The good thing about this technique is that the text is invisible, but rendered until mouse-overed, so search engines will read it. Problematic about this is that you can’t overwrite the opacity of a parent element. That means that you can’t have fully visible text in a <p> tag for example. The child elements will have the same opacity.

Code snippets:

HTML file:

<div class="box">
    <img src="pics/sunny_day.jpg">
    	<div class="box_text">
        <h2>oh sunny day</h2>
        	<p>
           	Description text
            </p>
        </div>
	</div>

CSS file:

.box {
	float: left; /* free space for content on the right of the element */
	margin: 5px;
	height: 333px;
	width: 500px;
	border: 5px solid white;
}

.box_text {
	position: relative;
	top:-341px; /* a little dirty workaround for this case, can surely be done better */
	left: -5px; /* a little dirty workaround for this case, can surely be done better */
	height: 333px;
	width: 500px;
	padding: 5px; /* inner distance to content */
	font-size: 1.1em;
	background: white;
	overflow: hidden; /* If text to big, don't render, don't create scrollbar */
	opacity: 0; /* make invisible */
	-moz-transition: opacity 1s linear; /* Transition for Mozilla Firefox */
	-o-transition: opacity 1s linear; /* Transition for Opera */
	-webkit-transition: opacity s linear; /* Transition for Webkit (Chrome, Safari) */
}
.box_text:hover {
opacity: 1; /* how visible the object is going to become on hover, values like 0.3 or 0.75 are available */
.box_text:hover {	opacity: 1; /* how visible the object is going to become on hover, values like 0.3 or 0.75 are available */

If you try off this feature, please show your results or ask if there is something you want to know icon smile CSS3 Close Up: transition Thanks for reading!

Give me the first comment

Leave a Reply