السلام عليكم ورحمة الله وبركاته تدوينة اليوم تمكنك من إضافة وصف للصور التي تريد بتأثيرات جمالية رائعة يمكنك من خلالها إنشاء معرض لتصاميمك وصورك بشكل رائع يمكنك معاينتها من هنا فقط كل ما عليك فعله هو متابعة الشرح.
توجه إلي لوحة التحكم / قالب / إعدادات HTML
ابحث عن ]]></b:skin> وأضف الكود التالي قبله مباشرةً.
#bt_imageeffect { margin: 20px auto; width: 100%;min-height: 300px; padding: 20px 0; text-align: center; } .galleryItem { display: inline-block;; position: relative; width: 250px; height: 250px; padding: 0;margin: 0 20px; border: solid 10px #fff; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); } .galleryItem img { width: 250px;height: 250px; } .caption { position: relative; display: inline-block; width: 250px; height: 250px; z-index: 10; } .caption::before { content: attr(data-title); position: absolute;top: 0; left: 0; width: 250px; height: 0; font-family: 'Croissant One', cursive; font-size: 1.8em;font-weight: 600; line-height: 1.4em;color: #086FA1; background: #fff; overflow: hidden; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; } .caption::after { content: attr(data-description); position: absolute; bottom: -0;left: 0; width: 250px;height: 0; font-family: 'Poiret One', cursive; font-size: 1.1em; font-weight: 400; line-height: 1.4em;color: #fff; background: #222; overflow: hidden; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; } .caption:hover::before { height: 125px; } .caption:hover::after { bottom: 0;height: 125px; }
لم نتهي بعد هناك عدة أماكن يمكنك إضافة الصور فيها أنا سأذكر اثنين فقط.
- أولا في أحد المواضيع أو الصفحات.
<div id="bt_imageeffect"><li class="galleryItem"> <a class="caption" data-description="DESCRIPE1" data-title="TITLE1" href="WWW.TH3SKILL.COM"> <img alt="Nature Scene" src="PHOTO1"/> </a></li><li class="galleryItem"> <a class="caption" data-description="DESCRIPE2" data-title="TITLE2" href="WWW.TH3SKILL.COM"> <img alt="Sunflower" src="PHOTO2" /> </a></li></div>
شكراً لتعليقك أخي الكريم :)
ردحذف