What is Royal Flush :-
Royal means straight containing the Highest card of the one suit, generally we all know that it is a game of card.
In this example we include that how to create a Royal Flush Game Effect in your website for that this program is very useful.
In this Example we Display Each card Overlaps with each Other like hiding one another.
To display on eachother we use a z-index property of the CSS like as Follow
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
What is z-index property in CSS:-
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Syntax:- object.style.zIndex="1"
Example of Vertical Menu in CSS Beautiful Vertical Menu Using CSS
OverLaps Layer with Each Other in CSS Display Layer on EachOther or OverLaps Layer
Example:-
<html>
<head>
<title></title>
<link rel="stylesheet" href="ex1.css" type="text/css" />
</head>
<body>
<h1>Royal Flush</h1>
<div id="ten_of_diamonds">
<img src="diamonds_10.gif" alt="10 of diamonds">
</div>
<div id="jack_of_diamonds">
<img src="diamonds_jack.gif" alt="Jack of diamonds">
</div>
<div id="queen_of_diamonds">
<img src="diamonds_queen.gif" alt="Queen of diamonds">
</div>
<div id="king_of_diamonds">
<img src="diamonds_king.gif" alt="King of diamonds">
</div>
<div id="ace_of_diamonds">
<img src="diamonds_ace.gif" alt="Ace of diamonds">
</div>
</body>
</html>
ex1.css:-
#ten_of_diamonds
{
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds
{
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds
{
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds
{
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds
{
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
img:hover
{
height:200px;
width:200px;
}
0 comments:
Post a Comment