CARD FLIP IN CSS

Steps to follow : –

  1. Create html file ( You may copy html file named flip.html given below )
  2. Create css file ( You may copy css file named flip.css given below )
  3. Link them using property to copy them in html file of head tag.

<link rel=”stylesheet” type=”text/css” href=”flip.css”>

flip.html file

<html>
<head>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”flip.css”>
</head>
<body>
<div class=”main”>
<div class=”front”>FRONT FACE</div>
<div class=”back”>BACK FACE</div>
</div>
</body>
</html>

flip.css file

body{background:#000;}
.main{margin-left:100px;margin-top:100px;}
.main div{width:300px;height:400px;float:left;position:fixed;font-size:48px;border-radius:5px;}
.front{padding:10px;background:#ff6666;color:red;border:2px solid #ff6666;transform:rotateY(0deg);backface-visibility:hidden;transition:all 1s;}
.back{padding:15px;padding-left:40px;background:grey;color:white;border:2px solid grey;transform:rotateY(180deg);backface-visibility:hidden;transition:all 1s;}
.main:hover .front{transform:rotateY(-180deg);}
.main:hover .back{transform:rotateY(0deg);}

FRONT VIEW

BACK VIEW

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

HOVER TO OVERLAP ONE BOX ON OTHER

These are the steps to overlap one box on other.

  1. Create two boxes using div element in html or you may copy my code below overlap_box.html.
  2. Create css file for styling or copy css file overlap_box.css .
  3. Link css file with html file via copy the code in header part of html code.

<link rel=”stylesheet” type=”text/css” href=”overlap_box.css”>

overlap_box.html file

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”overlap_box.css”>
</head>
<body><div class=”main”>
<div class=”box1″></div><div class=”box2″></div>
</div>
</body>
</html>

overlap_box.css file

body{background:#000;}
.main .box1{background:#006666;transition:all 2s;border:2px solid #006666;}
.main .box2{background:#c6ffb3;border:2px solid #c6ffb3;}
.main div{float:left;padding:65px;}
.main{margin-left:100px;margin-top:150px;}
.main:hover .box1{transform:rotateY(180deg);margin-left:80px;margin-right:-134px;}

BEFORE HOVER

ON HOVER

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

BUBBLE ROTATE AT 360 DEGREE ON THE SURFACE

These are the steps for the motion of the single bubble on the surface.
1. Create an html file. I also create a file named bubble.html.

2. Create a css file for styling of html elements. I also create a file named bubble.css.

3. Link css file with html file using link tag in html as

<link rel=”stylesheet” type=”text/css” href=”bubble.css”>

bubble.html file

<html>

<head>

<title>BUBBLE ROTATE AT 360</title>

<link rel=”stylesheet” type=”text/css” href=”bubble.css”>

</head>

<body>

<div class=”main”><div></div></div>

</body>

</html>

bubble.css file

body{background:#006666;}
.main div{border:2px solid #ffe6e6;background:#ffe6e6;
padding:40px;
margin-top:20px;
margin-right:740px;

margin-left:540px;
border-radius:205px;
animation-name:example;
animation-duration:5s;
animation-iteration-count:infinite;
}
@keyframes example{
0%{padding:40px;border:2px solid #fff;background:#fff;
margin-top:;
margin-right:;
margin-left:;}
20%{padding:40px;border:2px solid #ffb3b3;background:#ffb3b3;margin-left:740px;margin-top:220px;}
40%{padding:40px;border:2px solid #ff6666;background:#ff6666;margin-left:540px;margin-top:420px;}
60%{padding:40px;border:2px solid #ff1a1a;background:#ff1a1a;margin-left:340px;margin-top:220px;margin-right:940px;}
80%{padding:40px;border:2px solid #b30000;background:#b30000;}
}

Screenshot (1982)
BEFORE

Screenshot (1982)

Screenshot (1982)
Screenshot (1982)

Screenshot (1982)
AFTER

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

BUBBLE OUT RIGHT ON HOVER

css1


Steps for the hover effect : –
  1. Create number of bubbles you want using div tag or copy four.html file.
  2. Create four.css file for styling.
  3. Link 1st file with second file using link tag.
four.html file : –

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”four.css”>

</head>

<body>

<div class=”div_div1″>

<div class=”div1″></div><div class=”div2″></div>

<div class=”div3″></div><div class=”div4″></div>

<div class=”div5″></div><div class=”div6″></div>

<div class=”div7″></div><div class=”div8″></div>

<div class=”div9″></div><div class=”div10″></div>

<div class=”div11″></div><div class=”div12″></div>

</div>

</body>

</html>

four.css file : –

body{background:#fff;}

.div_div1 div{border:2px solid #006666;border-radius:80px;text-align:center;padding:50px;}

.div_div1 div{width:10px;height:10px;background:#000;border:2px solid #fff;color:white;transition:all 3s;}

.div_div1 div:hover{animation-name:example1;animation-duration:1s;animation-iteration-count:infinite;box-shadow:box-shadow:2px 100px 17px #006666;}

.div1{margin-top:10px;margin-left:90px;}
.div2{margin-top:-115px;margin-left:90px;}
.div3{margin-top:-115px;margin-left:90px;}
.div4{margin-top:-115px;margin-left:90px;}
.div5{margin-top:-115px;margin-left:90px;}
.div6{margin-top:-115px;margin-left:90px;}
.div7{margin-top:-115px;margin-left:90px;}
.div8{margin-top:-115px;margin-left:90px;}
.div9{margin-top:-115px;margin-left:90px;}
.div10{margin-top:-115px;margin-left:90px;}
.div11{margin-top:-115px;margin-left:90px;}
.div12{margin-top:-115px;margin-left:90px;}

.div_div1:hover .div1{margin-left:90px;margin-top:10px;}
.div_div1:hover .div2{margin-left:190px;margin-top:-110px;}
.div_div1:hover .div3{margin-left:290px;margin-top:-110px;}
.div_div1:hover .div4{margin-left:390px;margin-top:-112px;}
.div_div1:hover .div5{margin-left:490px;margin-top:-113px;}
.div_div1:hover .div6{margin-left:590px;margin-top:-113px;}
.div_div1:hover .div7{margin-left:690px;margin-top:-113px;}
.div_div1:hover .div8{margin-left:790px;margin-top:-112px;}
.div_div1:hover .div9{margin-left:890px;margin-top:-113px;}
.div_div1:hover .div10{margin-left:990px;margin-top:-114px;}
.div_div1:hover .div11{margin-left:1090px;margin-top:-114px;}
.div_div1:hover .div12{margin-left:1190px;margin-top:-115px;}

@keyframes example1{
10%{background:#c6ffb3;border:2px solid #c6ffb3;}
30%{background:#c6ffb3;border:2px solid #c6ffb3;}
50%{background:#c6ffb3;border:2px solid #c6ffb3;}
70%{background:#c6ffb3;border:2px solid #c6ffb3;}
100%{background:#c6ffb3;border:2px solid #c6ffb3;}
}

BEFORE HOVER

Screenshot (1982)

ON HOVER

Screenshot (1983)

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

HOVER PROPERTY TO SHOW TEXT MOVE ON LEFT

css1


Steps for : –
  1. Paste a code of hover.html to your any html editor.
  2. Choose any image you want where behind text becomes hidden.
1. hover.html

<html>

<head>

<title>ON HOVER TO SHOW AND MOVE TEXT LEFT</title>

<style>

.div .div1{margin-left:300px;margin-top:400px;

font-size:30px;margin-right:-70px;background:#006666;

padding:10px;border-radius:5px;color:white;width:40px;

transition:all 3s;}

.div2 img{height:60px;width:60px;margin-left:10px;

margin-top:396px;border-radius:5px;}

.div:hover .div1{margin-right:-60px;width:180px;

margin-left:150px;margin-top:400px;

font-size:30px;display:inline;background:#c6ffb3;

padding:10px;border-radius:5px;color:white;}

.div:hover .div2 img{position:fixed;}

</style>

</head>

<body>

<div class=”div”>

<a href=”#”><div class=”div1″>FOLLOW </div></a>

<div class=”div2″><img src=”24.png”></div>

</div>

</body>

</html>

2. Add any image abc.png or with any extension. I used 24.png for this hover effect.

24

BEFORE HOVER

before

AFTER HOVER

after

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn