Wednesday, 18 October 2017

How to apply Animation and transition on image gallery by css-3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>About Us</title>
<link href="../css/style.css" rel="stylesheet"  type="text/css"/>

<style>



#imgbannaer img:hover
{
 border:5px solid red;
opacity:0.9;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);

}
#imgbannaer img
{

 -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  transition: width 2s, height 2s, transform 2s;
}



</style>
</head>

<body>

<div id="warpper">

<header>

<div style="width:50%;height:200px;float:left">

<img src="../img/logo.png" style="width:250px;height:190px;">



 </div>
<div style="width:50%;height:200px;float:left">
<img src="../img/logo2.png" style="width:250px;height:190px;">

</div>


 </header>

<nav>
<ul>

<li> <a href="../index.html">HOME </a> </li>

<li> <a href="service.html">SERVICE </a> </li>

<li> <a href="about us.html">ABOUT </a> </li>

<li> <a href="contact.html">CONTACT</a> </li>

<li> <a href="gallery.html">GALLERY</a> </li>


</ul>


</nav>



<section style=" height:auto">


<div id="imgbannaer" style="width:90%;background-color:#FFF; margin:0 auto;margin-top:20px;">
<a href="../img/g1.jpg" target="new">
<img src="../img/g1.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>

</a>


<img src="../img/g2.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g3.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g4.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g5.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>

<br><br>


<img src="../img/g6.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g7.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g8.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g9.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g10.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>

<br><br>

<img src="../img/g1.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g2.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g3.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g4.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g5.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>

<br><br>


<img src="../img/g6.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g7.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g8.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g9.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g10.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>







</div>









 </section>

<br><br>
<footer>
<br>


<p style="text-align:center;">Made by : Salmanmasood </p>
</footer>




</div>


</body>
</html>
-

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Pass Dynamically Added Html Table Records List To Controller In Asp.net MVC

Controller Code: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ...