Hello Readers, this is a small blog on how to pop out an image on mouse hover using css3. This is possible by animating the position of the image and the box shadow property of css3.
In this example, I have taken images of facebook, linkedin, googleplus, twitter in a div having class socialicon. socialicon have fixed width and height: 50px and margin: 10px, and applied transition to animate the position of images, transition is used to change the element's property instantly with in a period of time. As a result when we rolled over these icons, it appears as if, icons are popping out of the page.
Here is HTML code :
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="socialicon"><img src="images/twitter.png" class="popup"/></div>
<div class="socialicon"><img src="images/facebook.png" class="popup"/></div>
<div class="socialicon"><img src="images/googleplus.png" class="popup"/></div>
<div class="socialicon"><img src="images/linkedin.png" class="popup"/></div>
</body>
</html>
CSS code is:
.socialicon {
float: left;
width: 50px;
height: 50px;
margin: 10px;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.socialicon > .popup {
width: 100%;
margin: 10px;
border-radius: 50%;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.socialicon > .popup:hover {
margin: 0px;
box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);
}
Comment: In the above code I had changed the margin to 0px and applied box- shadow property (6px 6px 4px 4px rgba(0, 0, 0, 0.3)) on social media images , on mouse hover. As a result images are looking as if they are popping out.
Note: The above code will run on latest version of all the browsers efficiently Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .
0 Comment(s)