Today in designing world many technologies are evolved and many effective and attractive programs,themes,screen saver are developed as well as in current,many websites which related to image binding and image based using this technology.
There are many programming languages as well as scripts like HTML,HTML-5,CSS,Javascript are used to developed designing effects in websites,banners and image based programs like Photoshop,Picasa etc.
Do you know we can develop different effects in asp.net with the help of different events and css ?.We can also use scripts for advance effects.
Here i am going to explain mouse hover effect based image slider.First of all we will create stylesheet as per our requirement.
Stylesheet.css
div.dir-hover { position: relative; }
div.dir-hover img { width: 100%;}
div.dir-hover span { position:absolute; width: 100%; height: 100%;box-sizing:border-box;
transition: .3s linear;padding-left:20%;padding-right:30%;padding-top:20%;padding-bottom:20%}
div.dir-hover span:nth-child(1) { top: 0; left: -90%;
background:hsla(0,70%,50%,0.5); } /* left side*/
div.dir-hover span:nth-child(2) { top: 0; left: 90%;
background:hsla(90,70%,50%,0.5);} /* right side*/
div.dir-hover span:nth-child(3) { top: -90%; left:0;
background:hsla(180,70%,50%,0.5); } /* top side*/
div.dir-hover span:nth-child(4) { top: 90%; left: 0;
background:hsla(270,70%,50%,0.5);} /* bottom side*/
div.dir-hover { position: relative; overflow: hidden; }
div.dir-hover span:hover { opacity: 1; }
div.dir-hover span:nth-child(1):hover { left: 0% }
div.dir-hover span:nth-child(2):hover { left: 10%}
div.dir-hover span:nth-child(3):hover { top: 0% }
div.dir-hover span:nth-child(4):hover { top: 10%}
|
In above code,we create stylesheet for division and then create hover stylesheet for that division.Hover effect applied on the span which contains different images which will be shown when mouse hover effect will occur.
In above code,you are slightly surprised with the use of HSLA. Now next question in your mind is what is HSLA ?How can we use it ?
HSLA means Hue,Saturation,Light and Alpha.Each and every element contains effect in the image as per changes applied in the values of HSLA. Here we are using HSLA because,we want to produce mouse hover effect and want to show images,so original image will be as it is and new image will be shown over it.
Now,we will create designing part for this program.
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Image Slider with mouse-hover effect</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="dir-hover">
<span><img src="1.jpg" width="100%" height="100%" alt=""/></span>
<span><img src="2.jpg" width="100%" height="100%" alt=""/></span>
<span><img src="3.jpg" width="100%" height="100%" alt=""/></span>
<span><img src="4.jpg" width="100%" height="100%" alt=""/></span>
<img src="Chrysanthemum.jpg" alt="" />
</div>
</form>
</body>
</html>
|
When you will apply mouse hover over the top division it will be go down and image will be shown,same as for all direction.
Sample code you can download from the below download button.
0 comments:
Post a Comment