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