Intoduction :-
Hii Friends...
Today I explain how to make css hovering fill circle boundary with images bounce .
hover selector is used to select elements when you mouse over them. Here in this code it has two style hovering one is front part and second is back part. In back part we can add images . Here in back part i only write some headings.
DotnetModules
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DotnetModules</title>
<style type="text/css">
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: perspective(800px) rotateY(180deg);
-moz-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 100%;
height: 100%;
}
.service-one {
padding: 30px 30px 15px;
height: 19rem;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.service-one {
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.service-one.active,
.service-one:hover {
background-color: #31B0D5;
}
.flipper {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
-webkit-transform: perspective(800px) rotateY(0deg);
-moz-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
.back {
-webkit-transform: perspective(800px) rotateY(180deg);
-moz-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="service-one border-bottom" style="height: 200px; width: 200px;">
<a href="javascript:void(0)">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<div style="margin-left: 1px;">
<img class="img-responsive" style="height: 90px; width: 90px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
</img>
</div>
<h3 style="margin-left: 1px;">Welcome
</h3>
<p style="margin-left: 1px;">
DotNetModules
</p>
</div>
<div class="back">
<p style="margin-left: 1px; color:white;">
* Your Welcome *
</p>
<br />
<p style="margin-left: 1px; color:white;">
* On My Blog *
</p>
</div>
</div>
</div>
</a>
</div>
</div>
</form>
</body>
</html>
Hii Friends...
Today I explain how to make css hovering fill circle boundary with images bounce .
hover selector is used to select elements when you mouse over them. Here in this code it has two style hovering one is front part and second is back part. In back part we can add images . Here in back part i only write some headings.
DEMO:-
Example :-
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DotnetModules</title>
<style type="text/css">
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: perspective(800px) rotateY(180deg);
-moz-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 100%;
height: 100%;
}
.service-one {
padding: 30px 30px 15px;
height: 19rem;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.service-one {
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.service-one.active,
.service-one:hover {
background-color: #31B0D5;
}
.flipper {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
-webkit-transform: perspective(800px) rotateY(0deg);
-moz-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
.back {
-webkit-transform: perspective(800px) rotateY(180deg);
-moz-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="service-one border-bottom" style="height: 200px; width: 200px;">
<a href="javascript:void(0)">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<div style="margin-left: 1px;">
<img class="img-responsive" style="height: 90px; width: 90px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
</img>
</div>
<h3 style="margin-left: 1px;">Welcome
</h3>
<p style="margin-left: 1px;">
DotNetModules
</p>
</div>
<div class="back">
<p style="margin-left: 1px; color:white;">
* Your Welcome *
</p>
<br />
<p style="margin-left: 1px; color:white;">
* On My Blog *
</p>
</div>
</div>
</div>
</a>
</div>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment