سلام می خوام روی تصاویر image galleryم یه دیو شفاف بذارم که به سمت بالا حرکت کنه و روش تکست باشه
ممنون میشم راهنمایی کنید:63:
نمایش نسخه قابل چاپ
سلام می خوام روی تصاویر image galleryم یه دیو شفاف بذارم که به سمت بالا حرکت کنه و روش تکست باشه
ممنون میشم راهنمایی کنید:63:
سلام دوستِ عزیز. صبحتون بخیر...
برای اینکار میتونید یه مثلا div.parent داشته باشید و توی اون:
- یه img میخواید
- و یه div.child دیگه که همین دیو شامل هدینگ، متن و لینک مورد نظرتون میشه.
هر دو عنصر فرزند رو بعد از تنظیم width و height، نسبت به دیوِ مادر position: absolute میکنید.
استایلی که باید به div.child اختصاص بدید هم که فکر میکنم مشخص باشه دیگه. برای موقع هاور شدن هم که top دیو فرزند رو تغییر میدید.
این روند کلی کار هست. کدهای فعلیتون رو اگر ببینیم، بهتر میتونیم راهنمایی کنیم...
<!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 هم داره
لینک نمونه آنلاین ازش دارید ؟
نه ندارم یکی از دوستام نوشته اینو
توی این پن، نمونه کد لازم رو براتون نوشتم :
A Pen by MohseN
کد رو بررسی کنید و با توجه به نیازتون تغییرش بدین.
موفق باشین.
سلام من هم همین مشکل را دارم .این پن که فرستادید خیلی خوبه ولی کد css یا java ی اون را چه طوری میشه دید؟
سلام.
اسم اون کلیدی که با کلیک روش میتونید سورس رو ببینید خاطرم نیست که چیه توی کدپن.
یه کلیدی بنام view source یا همچین چیزایی باید باشه. یا اینکه یه شات از صفحه ای که میبینید بزارید که بگم کدوم بود...
تشکر.
کدی که تو کد اپن گذاشتن الان نیاز به js خاصی نداره .
تو قسمت html که معلوم کد های html هستش و تو قسمت css هم کد های css قرار داره .
حالا دیق بگین چی می خواهین راحتر میشه راهنمایی تون کرد .
موفق باشید .
بله، درسته... یادم رفت اشاره کنم به این موضوع...
دیگه با وجود css3 برای داشتن همچین چیزی اصلا به js نیاز نیست. تو پنی که گذوشتم هم استفاده ای نشده از js...