Web Dev Tips

Here is the complete code to make a stylish hover gallery;

<html>
<head>
<title>gallery</title>
</head>
<body>
<style>
ul{
margin-top:100px;
margin-left:200px;
}
ul li{
display:inline;
}
div{
height:280px;
width:50px;
float:left;
border-style:solid;
border-color:grey;
border-width:2px;
}
div:hover{
width:300px;
}
.first{
background-image:url("img (1).jpg");
}
.second{
background-image:url("img (2).jpg");
}
.third{
background-image:url("img (3).jpg");
}
.fourth{
background-image:url("img (4).jpg");
}
.fifth{
background-image:url("img (5).jpg");
}
.sixth{
background-image:url("img (6).jpg");
}
h1{
color:gray;
Font-family:Comic Sans MS;
text-align:center;
}
</style>
</body>
<h1>Mouseover any part of the following images to display it.</h1><br>
<ul>
<li><div class="first"></div></li>
<li><div class="second"></div></li>
<li><div class="third"></div></li>
<li><div class="fourth"></div></li>
<li><div class="fifth"></div></li>
<li><div class="sixth"></div></li>
</ul>
</html>
Add images as you like. Enjoy!!

Web Dev Tips

Monday, August 17, 2015

Here is the complete code to make a stylish hover gallery;

No comments:

Post a Comment