css3 hover انشاء تاثير على الصورة

css3 hover انشاء تاثير على الصورة

css3 hover image affect

تعتبر التاثيرات التي تجمع ما بين الصور و العبارات النصية هي الاقوى على مستوي الانترنت و هنا سنلقي النظر على كيفية انشاء بعض الامثلة حتي يكون عندك فكرة كاملة لبداية العمل

Demo مثال على الكود

Demo مثال اخر على الكود

Arabic HTML tutorials
Arabic HTML tutorials
 
figure{
    width: 400px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
figure figcaption{
    position: absolute;
    color: #fff;
    background: rgba(0,0,0,0.5);
    width: 100%;
    padding: 50px 0;
    text-align: center;
    font-weight: bold;
    opacity: 0.5;
    -webkit-transition: all 0.5s ease;
    -moz-transition:    all 0.5s ease;
    -o-transition:      all 0.5s ease;
}
figure:first-child figcaption{
    top: 0;
    margin-top: -100px;
}
figure:first-child:hover figcaption {
  opacity: 1;
  margin-top: 0;
}
figure:last-child figcaption{
    bottom: 0;
    margin-bottom: -100px;
}
figure:last-child:hover figcaption {
  opacity: 1;
  margin-bottom: 0;
}
  • HTML-CSS
  • arabic css3
  • medhat

    عندى مشكلة فى ترتيب الطبقات انا محتاج لما اعمل هوفر يبقى المربع الأسود هو اعلى واحد يعنى كل المربعات تبقى تحتة
    medhatmero552000@gmail.com
    شكراً جزيلاً
    html code

    css code
    .d1
    {
    width: 100px;
    height: 100px;
    background-color: #000;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;
    border: 3px solid red;
    }
    .d1:hover::after
    {
    content: "";
    width: 100px;
    height: 100px;
    background-color: #fff;
    position: absolute;
    right: 50px;
    top: 30px;
    z-index: 1;
    border: 3px solid blue;
    }
    .d1:hover::before
    {
    content: "";
    width: 100px;
    height: 100px;
    background-color: #ccc;
    position: absolute;
    right: 70px;
    top: 60px;
    z-index: 2;
    border: 3px solid #000;
    }

    • eldewiny

      طب انت مصعبها على نفسك لية ممكن تغير اللون و تغير البوزشان
      postions , before, after