PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : قرار دادن دیو رو تصویر


marima
February 17th, 2015, 09:42
سلام می خوام روی تصاویر image galleryم یه دیو شفاف بذارم که به سمت بالا حرکت کنه و روش تکست باشه
ممنون میشم راهنمایی کنید:63:
startToday
February 17th, 2015, 10:23
سلام دوستِ عزیز. صبحتون بخیر...
برای اینکار میتونید یه مثلا div.parent داشته باشید و توی اون:
- یه img میخواید
- و یه div.child دیگه که همین دیو شامل هدینگ، متن و لینک مورد نظرتون میشه.
هر دو عنصر فرزند رو بعد از تنظیم width و height، نسبت به دیوِ مادر position: absolute میکنید.
استایلی که باید به div.child اختصاص بدید هم که فکر میکنم مشخص باشه دیگه. برای موقع هاور شدن هم که top دیو فرزند رو تغییر میدید.

این روند کلی کار هست. کدهای فعلیتون رو اگر ببینیم، بهتر میتونیم راهنمایی کنیم...
marima
February 17th, 2015, 11:33
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8"/>
<link href="./img/favicon.ico" rel="shortcut icon">
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<main>
<section class="main-sec">
<header class="span2 logo" ><a><img class="logo" src="./img/DGlog-logo.png" alt="header-logo"></a></header>
<article style="clear: both"></article>
<section class="part-sec">
<article class="span4 part-container"><a><img class="dg-part" src="img/01.png" alt="pic01"></a></article>
<article class="span4 part-container"><a><img class="dg-part" src="img/02.png" alt="pic02"></a></article>
<article class="span4 part-container"><a><img class="dg-part" src="img/03.png" alt="pic03"></a></article>
<article class="span4 part-container"><a><img class="dg-part" src="img/04.png" alt="pic04"></a></article>
<article class="span4 part-container"><a><img class="dg-part" src="img/05.png" alt="pic05"></a></article>
<article class="span4 part-container"><a><img class="dg-part" src="img/06.png" alt="pic06"></a></article>
</section>
<article style="clear: both"></article>
<article class="btn-container"><button class="btn-try">Try it !</button></article>
</section>
</main>
</body>

- - - Updated - - -

.dg-part{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.dg-part:hover{
filter: none;
}
.part-container{
margin-bottom: 3%;
}
body{
background-image: url("../img/Pattern.jpg");
background-repeat: repeat-x repeat-y;
}
.main-sec{
width: 90%;
display: block;
margin: auto;
}
.logo{
display: block;
margin: auto;
float: none;
}
.part-sec{
width:80%;margin: auto;
}
.btn-container{
width:86.5%;margin: auto;
}
.btn-try{
width: 90%;display:block;
margin:auto;
border: none;
height:60px;
color: #fff;
background-color: #79c652;
font-size: 3vw;
}

- - - Updated - - -

کدا رو من ننوشتم من فقط میخوام این قابلیتو بهش اضافه کنم ممنون میشم راهنمایی کنیدیه فایل bootstrap.css هم داره
startToday
February 17th, 2015, 11:57
لینک نمونه آنلاین ازش دارید ؟
marima
February 17th, 2015, 12:27
نه ندارم یکی از دوستام نوشته اینو
startToday
February 17th, 2015, 14:12
توی این پن، نمونه کد لازم رو براتون نوشتم :
A Pen by MohseN (http://codepen.io/Moh3eN/pen/KwoKdL)

کد رو بررسی کنید و با توجه به نیازتون تغییرش بدین.

موفق باشین.
naiereh
February 22nd, 2015, 10:39
سلام من هم همین مشکل را دارم .این پن که فرستادید خیلی خوبه ولی کد css یا java ی اون را چه طوری میشه دید؟
startToday
February 22nd, 2015, 12:31
سلام.
اسم اون کلیدی که با کلیک روش میتونید سورس رو ببینید خاطرم نیست که چیه توی کدپن.
یه کلیدی بنام view source یا همچین چیزایی باید باشه. یا اینکه یه شات از صفحه ای که میبینید بزارید که بگم کدوم بود...

تشکر.
ms313
February 22nd, 2015, 12:56
کدی که تو کد اپن گذاشتن الان نیاز به js خاصی نداره .
تو قسمت html که معلوم کد های html هستش و تو قسمت css هم کد های css قرار داره .
حالا دیق بگین چی می خواهین راحتر میشه راهنمایی تون کرد .
موفق باشید .
startToday
February 22nd, 2015, 13:37
بله، درسته... یادم رفت اشاره کنم به این موضوع...
دیگه با وجود css3 برای داشتن همچین چیزی اصلا به js نیاز نیست. تو پنی که گذوشتم هم استفاده ای نشده از js...