Home > Developer > Web Develop
<title>jquery translucent matte effect when hovering over a picture </title>
<style>
*{margin:0;padding:0;}
Li{list-style:none;}
. box{width:800px;height:400px;margin:50px Auto;overflow:hidden;}
. box ul Li{width:200px;height:200px;float:left;position:relative;overflow:hidden;}
. Box ul Li. dask{width:170px;height:180px;padding:20px 0 0 30px;background: #000; opacity:0.8;position:absolute;top:- 200px;left:0;}
. Box ul Li Dask p{color: #fff;}
. Box ul li. Dask a{color:green;text-decoration:none}
</style>
<script type= "Text/javascript" src= "/ajaxjs/jquery-1.9.1.min.js" ></script>
<script>
$ (function () {
$ (". Box ul Li"). Hover (
function () {
$ (this). Find (". Dask"). Stop (). Delay ((). Animate ({"Top": 0,opacity:0.8},300)
},
function () {
$ (this). Find (". Dask"). Stop (). Animate ({"Top": -200,opacity:0},300)
}
)
})
</script>
<body>
<div class= "box" >
<ul>
<li>
<a href= "www.nftx8.com" ></a>
<div class= "Dask" >
<p> Tsuen Wan Hi-Tech </p>
<p> Day Wear </p>
<a href= "/" > The beauty of your imagination </a>
</div>
</li>
<li>
<a href= "www.nftx8.com" ></a>
<div class= "Dask" >
<p> Sunset </p>
<p> Days of mistake </p>
<a href= "/" > Natural Beauty </a>
</div>
</li>
</ul>
</div>
</body>
Change the img inside SRC to your local image name.
SOURCE www.nftx8.com
jquery Lightweight mouse hover translucent matte effect, a look to understand OH
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
