Yalnızca CSS ile görüntü üzerine gelindiğinde siyah şeffaf yer paylaşımı mı?

Yalnızca CSS ile fare görüntünün üzerine geldiğinde bir görüntüye şeffaf siyah bir kaplama eklemeye çalışıyorum. Mümkün mü? Bunu denedim:

http://jsfiddle.net/Zf5am/565/

Ama div'in görünmesini sağlayamıyorum.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

Bindirme öğesi yerine sözde bir öğe kullanmanızı öneririm. Sözde öğeler kapalı imgöğelere eklenemediğinden, yine de imgöğeyi sarmalamanız gerekir .

CANLI ÖRNEK BURADA - METİN ÖRNEĞİ

<div class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

CSS'ye gelince , öğe üzerinde isteğe bağlı boyutları ayarlayın .imageve görece konumlandırın. Duyarlı bir görüntü hedefliyorsanız, boyutları atlayın ve bu yine de işe yarayacaktır (örnek) . Unutulmamalıdır ki boyutlar, imgöğenin kendisinin aksine ana öğede olmalıdır , bkz .

.image {
    position: relative;
    width: 400px;
    height: 400px;
}

Alt imgöğeye 100%üst öğenin genişliğini verin ve vertical-align:topvarsayılan temel hizalama sorunlarını düzeltmek için ekleyin .

.image img {
    width: 100%;
    vertical-align: top;
}

Sözde öğeye gelince, bir içerik değeri belirleyin ve bunu .imageöğeye göre kesinlikle konumlandırın . Bir genişlik / yükseklik, 100%bunun farklı imgboyutlarda çalışmasını sağlayacaktır . Öğenin geçişini yapmak istiyorsanız, bir opaklık ayarlayın 0ve geçiş özelliklerini / değerlerini ekleyin.

.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

1Geçişi kolaylaştırmak için sözde öğenin üzerine geldiğinizde bir opaklık kullanın :

.image:hover:after {
    opacity: 1;
}

SONUÇ BURADA SONLANDIR

Fareyle üzerine gelindiğinde metin eklemek istiyorsanız:

En basit yaklaşım için, metni sözde öğenin contentdeğeri olarak eklemeniz yeterlidir :

BURAYA ÖRNEK

.image:after {
    content: 'Here is some text..';
    color: #fff;

    /* Other styling.. */
}

Yani gerektiğini çoğu durumda işe; ancak, birden fazla imgöğeniz varsa, aynı metnin üzerine gelindiğinde görünmesini istemeyebilirsiniz. Bu nedenle metni bir data-*öznitelikte ayarlayabilir ve bu nedenle her imgöğe için benzersiz bir metne sahip olabilirsiniz .

BURAYA ÖRNEK

.image:after {
    content: attr(data-content);
    color: #fff;
}

Bir ile contentdeğerinin attr(data-content), sözde elemanı metin ekler .imageöğenin data-contentözniteliği:

<div data-content="Text added on hover" class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

Biraz stil ekleyebilir ve bunun gibi bir şey yapabilirsiniz:

BURAYA ÖRNEK

Yukarıdaki örnekte, :aftersözde öğe siyah kaplama görevi görürken :beforesözde öğe resim yazısı / metindir. Öğeler birbirinden bağımsız olduğundan, daha optimum konumlandırma için ayrı stil kullanabilirsiniz.

.image:after, .image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:after {
    content: '\A';
    width: 100%; height:100%;
    top: 0; left:0;
    background:rgba(0,0,0,0.6);
}
.image:before {
    content: attr(data-content);
    width: 100%;
    color: #fff;
    z-index: 1;
    bottom: 0;
    padding: 4px 10px;
    text-align: center;
    background: #f00;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
    opacity: 1;
}

CSS3 filtresi

Bu özellik yalnızca webkit'te uygulanmasına ve tarayıcı uyumluluğuna sahip olmamasına rağmen, şunlara bir göz atmaya değer:

.image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}

JSFiddle Demosu

Referanslar

• https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
• http://www.html5rocks.com/en/tutorials/filters/understanding-css/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• http://davidwalsh.name/css-filters
• http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

SO ile ilgili benzer konular

• CSS'de Görüntü Parlaklığı Nasıl Azaltılır
• HTML / CSS'de bir görüntüyü gri tonlamaya dönüştürme
• CSS3 Filtre Bulanıklığı ile Tanımlı Kenarlar

Sen yakındın. Bu çalışacak:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }

Sen koymak için gerekli :hovergörüntü üzerinde ve yapmak .overlayekleyerek kapağı resmin tamamını right:0;ve bottom:0.

jsfiddle: http://jsfiddle.net/Zf5am/569/

Ekstra overlay div yerine: after image div'i kullanmanın iyi bir yolu: http://jsfiddle.net/Zf5am/576/

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.image {position:relative; border:1px solid black; width:200px; height:200px;}
.image img {max-width:100%; max-height:100%;}
.image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}

.overlayyüksekliği veya genişliği ve içeriği yoktu ve üzerine gelemezsiniz display:none.

Bunun yerine div'e aynı boyut ve konumu verdim ve üzerine gelindiğinde değeri .imagedeğiştirdim RGBA.

http://jsfiddle.net/Zf5am/566/

.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }

Burada ne yaptığımı görün: http://jsfiddle.net/dyarbrough93/c8wEC/

Öncelikle, kaplamanın boyutlarını asla ayarlamazsınız, yani ilk etapta görünmüyor demektir. İkinci olarak, görüntünün üzerine geldiğinizde kaplamanın z-endeksini değiştirmenizi öneririm. Bindirmenin opaklığını / rengini ihtiyaçlarınıza göre değiştirin.

.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}

Bunu, görüntünün opaklığıyla oynayarak ve görüntünün arka plan rengini siyaha ayarlayarak başarabilirsiniz. Görüntüyü şeffaf yaparak daha koyu görünecektir.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div> 

CSS:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

Bunun diğer tarayıcılarda da çalışması için tarayıcıya özgü opaklığı ayarlamanız gerekebilir.

Görüntünün boyutunun bindirme div bölümüne bir minimum yükseklik ve minimum genişlik verir ve üzerine gelindiğinde arka plan rengini değiştirirdim

.overlay { position: absolute; top: 0; left: 0;  z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}