سلام می خوام روی تصاویر image galleryم یه دیو شفاف بذارم که به سمت بالا حرکت کنه و روش تکست باشه
ممنون میشم راهنمایی کنید
قرار دادن دیو رو تصویر
سلام می خوام روی تصاویر image galleryم یه دیو شفاف بذارم که به سمت بالا حرکت کنه و روش تکست باشه
ممنون میشم راهنمایی کنید
پاسخ : قرار دادن دیو رو تصویر
سلام دوستِ عزیز. صبحتون بخیر...
برای اینکار میتونید یه مثلا 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...
در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)
مجوز های ارسال و ویرایش
پاسخ با نقل قول