طلب كود

كونان2000 كتب:وعليكم السلام  @mo essam
مارئيك بالكود الموجود في هذا المنتدى https://rami1.ahlamontada.com/

لما تضغط على الصورة يحولك الى موضوع

Mc nabulsy كتب:

تفضل اخي عاين الكود:

اضغط هنا لمعاينة الكود

تقدر تاخد الاكواد من الموقع بالاعلى او تفضل مجموعه مع بعض

الكود:

<style>
* {box-sizing: border-box;}
.mcnabulsy {
  position: relative;
  width: 50%;
  max-width: 300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.motacode {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.mcnabulsy:hover .motacode {
  opacity: 1;
}
</style>

<div class="mcnabulsy">
  <a href="#"><img src="https://i93.servimg.com/u/f93/15/47/21/99/39111.png" alt="Avatar" class="image"></a>
  <div class="motacode">هنا وصف الصورة</div>
</div>



عند التكرار فقط كرر الكود التالي

الكود:

<div class="mcnabulsy">
  <a href="#"><img src="https://i93.servimg.com/u/f93/15/47/21/99/39111.png" alt="Avatar" class="image"></a>
  <div class="motacode">هنا وصف الصورة</div>
</div>


مشكور اخي علي المجهود بس انا عايزها كود واحد لانها لما بكرر الكود بينزلو تحت بعض ومش راضيين يتظبطو جمب بعض لو تقدر تساعدني يكون كود زي الصوره المرسله بالموضوع

كونان2000 كتب:هلا  @mo essam
هل هذا يمشي الحال https://rami1.ahlamontada.com/

  هلا اخي يمشي الحال وتسلم علي المجهود الرجاء ارسال الكود 

الكود:

.forum-description {
    float: right;
    border: solid #f44336 2px;
    display: inline-block;
    padding: 10px;
    background: #0c0b0b;
    text-align: center;
}

.forum-wsf {
 border: 0;
    top: 11.6rem;
    right: 0;
    color: #dddfe4;
    color: #FFF;
    font-size: 14px;
    z-index: 1;
    margin: 5px auto;
    background: #4caf50;
    padding: 10px;
}

.two_forums {
    margin: 10px -5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: space-between;
    align-items: center;
    justify-content: space-evenly;
}
.forum-section {
    padding: 0 15px;
    margin-bottom: 20px;
    white-space: normal;
    width: 24%;
    margin: 5px 0 5px;
    margin-top: 5px;
    height: 300px;
    padding: 0 !important;
}
.forum-content {
    margin-right: 0 !important;
}

.forum-image {
    font-size: 0;
}
.forum-image img {
 width: 147px;
    height: 170px;
}
.forum_name {
    color: #FFF;
    font-size: 14px;
    z-index: 1;
    margin: 3px auto;
    background: rgba(105 114 156 / 80%);
    padding: 10px;
}
.forum_name:hover {
    background: #000;
}
@media (max-width: 750px) {
    .forum-section {
        width: 48%;
    }
}



الكود:

<br />
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
 
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
 
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
 
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div><br />
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
 
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
 
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
 
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div><br />
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
 
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
 
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
 
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div>
<div class="forum-description">
                                                          
   <div class="forum-image">
                <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>         
   </div>
                    
   <div class="forum_name" style="">
                اكتب هنا اي شيء         
   </div><a href="888"></a>                                                 
   <div class="forum-wsf">
                اكتب اي شيء هنا       
   </div>
                                                        
</div><br />

أفندينا كتب: @كونان2000
أريد نفس هذا الكود ولكن يعمل تلقائيا
النسخه الاخيره

mo essam كتب:السلام عليكم احلي فريق

اريد كود صفحه html

يكون مثل هذه الصوره
محتاج الكود فقط وانا هعدل عليه
ان احط صور المواضيع هكذا واول ما العضو يدوس علي الصوره يحوله الي الموضوع الي اختاره
وشكرا مقدما

أفندينا كتب: @الغالي موجود
تمام قريبه جدا من المطلوب
بس لو تكون في هيئة بوابه
أو صفحة هتمل

الكود:

.container-imgs-list .image_item,  .container-imgs-list img{
    width: 250px!important;
    height: 250px!important;
}
div#imageList {
    background: #162f3a;
    margin-top: 0px !important;
}
.container-imgs-list .text_overlay {
  font-size: 15px;
    background: rgb(0 0 0);
    color: antiquewhite;

}
.container-imgs-list .image_item:hover .text_overlay {
    background: #03202e;
  padding-bottom: 20px;
}

#wrap > div.forum > div.forum-header:after {
    text-align: center;
    font-size: 30px;
    content: "لوحة الاعلانات";
}
#wrap > div.forum > div.forum-header {
    font-size: 0px;
}
#wrap > div.forum > div.forum-header i.material-icons,  #page-desc, #wrap > div.page-header{
    display: none;
    font-size: 0;
}
#wrap > div.forum {
    border: solid #0f1b24 20px;
}