تأثير hover على صور المواضيع بعدد التعليقات واسم الكاتب



السلام عليكم
ورحمة الله تعالى
وبركاته


في هذه التدوينة أجببت أن أشارك معكم
تأثير hover جميل على صور المواضيع بالرئيسية
مع عرض عدد التعليقات واسم الكاتب لكل موضوع
لكن قبل الشروع في اضافة التأثير عليك أولا أن تكون
على دراية بال html لأنك ستحتاج الى معرفة الوسم الحامل لصورة
الموضوع بالصفحة الرئيسية لأن الأكواد تختلف من قالب لاخر




طريقة التركيب

  1. قم بتحرير القالب
  2. ثم ابحث عن الوسم ]]></b:skin>
  3. وضع الأكواد التالية فوقه

  •   @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
  •   figure.snip1033 {
  •   font-size: 12px;
  •   color: #fff;
  •   position: relative;
  •   overflow: hidden;
  •   height: 200px;
  • }
  • figure.snip1033 img {
  •   opacity: 1;
  •   width: 100%;
  •   position: relative;
  •   -webkit-transition: opacity 0.35s;
  •   transition: opacity 0.35s;
  • }
  • figure.snip1033 .center {
  •   border-radius: 5px;
  •   display: block;
  •   z-index: 2;
  •   content: &#39;&#39;;
  •   position: absolute;
  •   background-color: #000;
  •   top: 50%;
  •   left: 50%;
  •   height: 70px;
  •   width: 70px;
  •   box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
  •   opacity: 0;
  •   text-align: center;
  •   -webkit-transform: translate(-50%, -50%) rotate(0deg);
  •   transform: translate(-50%, -50%) rotate(0deg);
  •   -webkit-transition: all 0.4s;
  •   transition: all 0.4s;
  • }
  • figure.snip1033 .center i {
  •   font-size: 38px;
  •   padding: 6px;
  •   color: #ffffff;
  •   line-height: 55px;
  •   opacity: 0.3;
  • }
  • figure.snip1033 figcaption {
  •   position: absolute;
  •   z-index: 2;
  •   top: 0;
  •   left: 0;
  •   width: 100%;
  •   height: 100%;
  •   text-align: left;
  • }
  • figure.snip1033 figcaption &gt; div {
  •   float: left;
  •   height: 100%;
  •   overflow: hidden;
  •   width: 50%;
  •   position: relative;
  • }
  • figure.snip1033 figcaption a {
  •   opacity: 0.7;
  • }
  • figure.snip1033 figcaption a:hover {
  •   opacity: 1;
  • }
  • figure.snip1033 figcaption h3 {
  •   background-color: #222;
  •   word-spacing: -0.1em;
  •   font-weight: 800;
  •   text-transform: uppercase;
  •   font-size: 1em;
  •   opacity: 0;
  •   position: absolute;
  •   -webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
  •   transition: opacity 0.45s,-webkit-transform 0.45s,-moz-transform 0.45s,-o-transform 0.45s,transform 0.45s;
  • }
  • figure.snip1033 figcaption .left h3 {
  •   border-radius: 5px 0 0 5px;
  •   top: 50%;
  •   padding: 2px 45px 6px 10px;
  •   background: #8c212a;
  •   color: #fff;
  •   font-weight: 200;
  •   margin: 0;
  •   right: 0;
  •   -webkit-transform: translate(100%, 0px);
  •   transform: translate(100%, 0px);
  • }
  • figure.snip1033 figcaption .right h3 {
  •   border-radius: 0 5px 5px 0;
  •   bottom: 50%;
  •   padding: 2px 8px 7px 35px;
  •   padding-left: 42px;
  •   -webkit-transform: translate(-100%, 0px);
  •   transform: translate(-100%, 0px);
  •   margin: 0;
  • }
  • figure.snip1033 a {
  •   left: 0;
  •   right: 0;
  •   top: 0;
  •   bottom: 0;
  •   position: absolute;
  • }
  • figure.snip1033 .red {
  •   background-color: #8c212a;
  • }
  • figure.snip1033 .yellow {
  •   background-color: #945600;
  • }
  • figure.snip1033 .white {
  •   background-color: #ffffff;
  •   color: #444444;
  • }
  • figure.snip1033:hover img,
  • figure.snip1033.hover img {
  •   opacity: 0.5;
  • }
  • figure.snip1033:hover figcaption .left h3,
  • figure.snip1033.hover figcaption .left h3 {
  •   opacity: 1;
  •   -webkit-transform: translate(0%, 0px);
  •   transform: translate(0%, 0px);
  • }
  • figure.snip1033:hover figcaption .right h3,
  • figure.snip1033.hover figcaption .right h3 {
  •   opacity: 1;
  •   -webkit-transform: translate(0%, 0px);
  •   transform: translate(-25%, 0px);
  • }
  • figure.snip1033:hover .center,
  • figure.snip1033.hover .center {
  •   opacity: 1;
  •   -webkit-transform: translate(-50%, -50%) rotate(45deg);
  •   transform: translate(-50%, -50%) rotate(45deg);
  • }
  • figure.snip1033:hover .center i,
  • figure.snip1033.hover .center i {
  •   -webkit-transform: translate(0%, -10px);
  •   transform: translate(0%, -10px);}
  1. الان قم بتركيب الأكواد التالية كما هو موضح
  • <figure class='snip1033'>
  • <img src="/image.png"/>
  • <figcaption>
  • <div class='left'>
  • <h3><data:post.author/></h3>
  • </div>
  • <div class='right'>
  • <h3 class='white'><span class='post-comment-cnt vcard'><data:post.numComments/> تعليقات</span></h3>
  • </div>
  • </figcaption>
  • <div class='center'><i class='ion-ios-loop-strong'/></div>
  • <a href='#'/>
  • </figure>
الكود باللون الأحمر موجود بقالبك فقط عليك البحث عنه بطريقة ما ووضعه بين الأكواد كما هو موضح وفي حالة لم تعرف كيف ضع رابط موقعك بتعليق ونحن سنساعدك باذن الله 

هناك 5 تعليقات

  1. اجعل المشاهدات بدلا من التعليقات في التأثير

    ردحذف
  2. شكرا لك على ما تقدم

    و لكن عندي سؤال لم اجد الكود الملون بالاحمر بقالبي انا استخدم قالب سيو فاست 4

    وللاسف لم افهم المقصود من هذه الجملة

    فقط عليك البحث عنه بطريقة ما ووضعه بين الأكواد

    اي اكواد نضعه بينها

    و هذا رابط موقعي

    https://www.halateck.com/

    ردحذف
    الردود
    1. ايحث عن thumb
      ستجد أسفله كود يبدأ ب <img
      ضعه بين الأكواد كما في الشرح

      حذف
    2. شكرا لك على الرد
      فهمت الان المطلوب و تمت التجربة بنجاح و لكن اختفت حركة الزوم للصور

      على كل حال شكرا لك على الاهتمام و شكرا لتعبك

      حذف


EmoticonEmoticon