PDA

View Full Version : سوال: آرام تر کردن حرکت تصویر


omid.s_net
پنج شنبه 09 شهریور 1391, 16:48 عصر
سلام خدمت شمابرنامه نویسان عزیز
ببخشید این صفحه را باز کنید
http://localhost:51034/picx/Default.aspx

من اگه بخواهم تصاویر آروم تر بره بالا چیکارکنم؟

این کد سی اس اس این تصویر:


a, a:visited
{
color: #30ADD1;
text-decoration: none;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
}
a:hover
{
color: #757575;
}

.boxgrid
{
width: 220px;
height: 170px;
float: right;
background: #333;
margin: 10px 1px;
overflow: hidden;
position: relative;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-html-border-radius: 10px;
border-radius: 10px;
top: 0px;
left: 0px;
}

.boxgrid img
{
width: 220px;
height: 170px;
position: absolute;
text-align:justify;
top: 0;
left: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-html-border-radius: 10px;
border-radius: 10px;
}
.boxgrid p
{
padding: 60px 20px 0px 20px;
text-align: center;
font: 15px 'BYekan';
}


اینم کد اج تی املش:





<head>
<title>Untitled Page</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://www.taktemp.com/wp-content/themes/taktemp-new/js/jquery.js"></script>

<script type="text/javascript" src="http://www.taktemp.com/wp-content/themes/taktemp-new/js/custom.js"></script>
</head>



<div class="boxgrid slidedown">
<img class="cover" src="http://axgig.com/images/41316298421643135063.jpg" width="170px"
height="120px">
<p>
<a href="http://google.com">وبسـایت آمـوزشی</a></p>
</div>
<div class="boxgrid slidedown">
<img class="cover" src="http://axgig.com/images/99494205691255022181.jpg" width="170px" height="120px">
<p>
<a href="http://google.com">وبسـایت آمـوزشی</a></p>
</div>
<div class="boxgrid slidedown">
<img class="cover" src="http://axgig.com/images/91744823811088431945.jpg" width="170px" height="120px">
<p>
<a href="http://google.com">وبسـایت آمـوزشی</a></p>
</div>
alitavakoli
پنج شنبه 09 شهریور 1391, 16:52 عصر
http://localhost:51034/picx/Default.aspx

آدرس لوکال هست!!!!
omid.s_net
پنج شنبه 09 شهریور 1391, 17:00 عصر
من بلدنیستم میشه لطف کنید و کدهاشو داخل برنامه اجراکنیدوکمکم کنید
alitavakoli
پنج شنبه 09 شهریور 1391, 17:03 عصر
این لینک (http://jsfiddle.net/9UgEF/66/)همین رو میخواین؟
omid.s_net
پنج شنبه 09 شهریور 1391, 17:19 عصر
کدشوچه جوری بزارم؟چراوقتی روی لینک میری عکس برمیگرده؟
alitavakoli
پنج شنبه 09 شهریور 1391, 17:34 عصر
این کد:


<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Highlight background (stackoverflow) - jsFiddle demo</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type="text/css">
a, a:visited
{
color: #30ADD1;
text-decoration: none;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
}
a:hover
{
color: #757575;
}

.boxgrid
{
width: 220px;
height: 170px;
float: right;
background: #333;
margin: 10px 1px;
overflow: hidden;
position: relative;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-html-border-radius: 10px;
border-radius: 10px;
top: 0px;
left: 0px;
}

.boxgrid img
{
width: 220px;
height: 170px;
position: absolute;
text-align:justify;
top: 0;
left: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-html-border-radius: 10px;
border-radius: 10px;
}
.boxgrid p
{
padding: 60px 20px 0px 20px;
text-align: center;
font: 15px 'BYekan';
}

</style>



<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#s').mouseenter(function() {
$('#1').hide('slow');
}).mouseout(function() {
$('#1').show('slow');
});

});//]]>

</script>


</head>
<body>
<div id="s" class="boxgrid slidedown">
<img id="1" class="cover" src="http://axgig.com/images/41316298421643135063.jpg" width="170px" height="120px" style="display: block; ">
<p>
<a href="http://google.com">وبسـایت آمـوزشی</a></p>
</div>
</body></html>