0
Kayıt Ol

CSS de resme border hover verdim, resmi içe gömüyor

7

●

1.787

  • 25-02-2015, 14:35:54
    #1
    kiNDar
    kiNDar
    Arkadaşlar imleci resmin üstüne getirince border i resmin dışına çerçeve olarak değilde, resmin içine çerçeve yapıyor. Bu şekilde olunca resmi içeri doğru gömüp hareket ettiriyor, yapamadım. Yardımcı olur musunuz?

    Aslında yapmak istediğim: Demo
  • 26-02-2015, 13:33:10
    #2
    Tonks
    Tonks
    F. STACK WEB + MOBILE DEV
    kiNDar adlı üyeden alıntı: mesajı görüntüle
    Arkadaşlar imleci resmin üstüne getirince border i resmin dışına çerçeve olarak değilde, resmin içine çerçeve yapıyor. Bu şekilde olunca resmi içeri doğru gömüp hareket ettiriyor, yapamadım. Yardımcı olur musunuz?

    Aslında yapmak istediğim: Demo
    HTML ve CSS kodlarınızı buradan paylaşabilirseniz yardımcı olabiliriz.
  • 26-02-2015, 17:41:21
    #3
    kiNDar
    kiNDar
    Tonks adlı üyeden alıntı: mesajı görüntüle
    HTML ve CSS kodlarınızı buradan paylaşabilirseniz yardımcı olabiliriz.
    İlginiz için teşekkür ederim. Demo siteden ben kodları tamamen aldım kendi siteme uyarladım. Herşey tamam, sadece resmin arka planına gölge efekti vermek için bir resim eklenmiş, o gözükmüyor. Çözemedim bir türlü.

    Kodu şu şekilde.
    .video-thumbimg:before {
content:"";
width:108%;
height:117%;
position:absolute;
background:url(images/shadow-small.png) right bottom no-repeat;
z-index:-2;
right:-3px;
background-size:101% 100%;
opacity:0.6;
}
  • 26-02-2015, 20:55:45
    #4
    Tonks
    Tonks
    F. STACK WEB + MOBILE DEV
    kiNDar adlı üyeden alıntı: mesajı görüntüle
    İlginiz için teşekkür ederim. Demo siteden ben kodları tamamen aldım kendi siteme uyarladım. Herşey tamam, sadece resmin arka planına gölge efekti vermek için bir resim eklenmiş, o gözükmüyor. Çözemedim bir türlü.

    Kodu şu şekilde.
    .video-thumbimg:before {
content:"";
width:108%;
height:117%;
position:absolute;
background:url(images/shadow-small.png) right bottom no-repeat;
z-index:-2;
right:-3px;
background-size:101% 100%;
opacity:0.6;
}
    hocam ilgil demo da html ve css yapıyı inceledim ve anlayabildiğim kadarı ile video-thumbimg classın üstüne bir class daha eklemiş o da şu şekilde

    <div class="video-home li:hover"></div>
    imlecin üstüne geldiğinde o turuncu alanın çıkmasını da

    .video-home li:hover {box-shadow: 0px 0px 0px 6px rgba(219,74,63,1)}
    bu css kodu ile sağlamış
  • 26-02-2015, 22:20:00
    #5
    kiNDar
    kiNDar
    Tonks adlı üyeden alıntı: mesajı görüntüle
    hocam ilgil demo da html ve css yapıyı inceledim ve anlayabildiğim kadarı ile video-thumbimg classın üstüne bir class daha eklemiş o da şu şekilde

    <div class="video-home li:hover"></div>
    imlecin üstüne geldiğinde o turuncu alanın çıkmasını da

    .video-home li:hover {box-shadow: 0px 0px 0px 6px rgba(219,74,63,1)}
    bu css kodu ile sağlamış
    Diğer sorunları hallettim. Şimdi bir tek resimdeki sorun var. Demo daki gibi nasıl yaparım? Bende başlığı uzatınca aşağıdaki resmi kaydırıyor.

  • 27-02-2015, 01:48:35
    #6
    Tonks
    Tonks
    F. STACK WEB + MOBILE DEV
    kiNDar adlı üyeden alıntı: mesajı görüntüle
    Diğer sorunları hallettim. Şimdi bir tek resimdeki sorun var. Demo daki gibi nasıl yaparım? Bende başlığı uzatınca aşağıdaki resmi kaydırıyor.

    Hocam yine HTML ve CSS kodlarınızı verebilirseniz buradan yardımcı olmaya çalışırım.
  • 27-02-2015, 02:38:27
    #7
    kiNDar
    kiNDar
    Tonks adlı üyeden alıntı: mesajı görüntüle
    Hocam yine HTML ve CSS kodlarınızı verebilirseniz buradan yardımcı olmaya çalışırım.
    Benim siteye uyarlayınca biraz karıştı. Skype ekledim sizi müsait olduğunuzda bakabilir miyiz?
  • 27-02-2015, 09:12:23
    #8
    Tonks
    Tonks
    F. STACK WEB + MOBILE DEV
    kiNDar adlı üyeden alıntı: mesajı görüntüle
    Benim siteye uyarlayınca biraz karıştı. Skype ekledim sizi müsait olduğunuzda bakabilir miyiz?
    elbette bakabiliriz hocam