Don't worry iam not using Javascript. This is done purely in CSS3. Yes,you heard it right. Now you can handle click event like JQuery in CSS3. Thanks to Transition effect. This can be done easily and with using only few lines of code. Don't worry if you are not yet familiar with CSS3 tricks. I'll soon be providing you some tricks that can be done in CSS3.Lets start with our CSS3 zoom. Iam also using HTML5 tags in here. You may be hearing it for the first time.But don't worry i'll explain them with the code. As said earlier i'll also be updating the HTML5 tags along with CSS3 tricks.
So lets start with the html code.
HTML :
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
The above is a HTML5 code.Now you don't have to write the whole document type declaration.Just <!doctype html> would do the work in HTML5. The <figure> element is intended to be used along with <figcaption> to mark the diagrams.photos and code examples etc. <figcaption> purpose is to add caption to the image.
Now lets get along with the CSS code. Its simple.
CSS code :
<style type="text/css">
figure { background: #e3e3e3; display: block; float: left;}
ul{list-style: none;}
#zoomy {
width: 200px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
/* Compliance to IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#zoomy:target {
width: 400px;
}
</style>
Its really simple isn't it? You can play along with it by using the transition effect. Like zooming the image just by hovering it. Please share if you like it.
So lets start with the html code.
HTML :
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h1> CSS3 Zoomy: Zoom-in and Zoom-out with click in CSS3 </h1>
<figure>
<img id="zoomy" src="http://www.tuvie.com/wp-content/uploads/rca-sleek-sustainable-concept-car1.jpg" alt="sleek" />
<figcaption>
<ul>
<li>
<a href="#zoomy">Zoom In</a>
</li>
<li>
<a href="#">Zoom Out</a>
</li>
</ul>
</figcaption>
</figure>
</body>
</html>
Now lets get along with the CSS code. Its simple.
CSS code :
<style type="text/css">
figure { background: #e3e3e3; display: block; float: left;}
ul{list-style: none;}
#zoomy {
width: 200px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
/* Compliance to IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#zoomy:target {
width: 400px;
}
</style>
Its really simple isn't it? You can play along with it by using the transition effect. Like zooming the image just by hovering it. Please share if you like it.
No comments:
Post a Comment