Arka plan üzerinde css geçiş efektleri VE üzerine gelin metin

Kutunun üzerine gelindiğinde hem metin hem de arka planda çalışmak için geçiş efektini yapmaya çalışıyorum ama şu ana kadar elde ettiğim sonuç iki ayrı etki. kutuyu tuttuğumda bg geçişi gayet iyi çalışıyor ama metnin etkisi sadece metnin kendisinin üzerine geldiğimde oluyor. Tüm kutunun içinde gezinip metni de taşımanız gerekmediğinde renk değişimini uygulamak istiyorum. Siyahdan beyaza değiştirmek için bG rengine ve beyazdan siyaha dönüşecek Başlığa ihtiyacım var!Arka plan üzerinde css geçiş efektleri VE üzerine gelin metin

benim css böyle

.stylish-popular-widget 
 
{ 
 
\t height: 150px; 
 
\t position: relative; 
 
\t width: 100%; 
 
\t 
 
} 
 
.stylish-popular-widget img 
 
{ 
 
\t height: 150px; 
 
\t max-width: 100%; 
 
} 
 
.stylish-popular-widget .meta-text 
 
{ 
 
\t background: rgba(0,0,0,.3); 
 
\t bottom: 0; 
 
\t top: 65%; /*adjust BG start position*/ 
 
\t left: 0; 
 
\t right: 0; 
 
\t position: absolute; 
 
\t text-align: left; 
 
\t padding-left: 10px; 
 
\t moz-transition: 1s; 
 
\t ms-transition: 1s; 
 
\t o-transition: 1s; 
 
\t transition: 1s; 
 
\t webkit-transition: 1s; 
 
} 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text h3 
 
{ 
 
\t color: #FF0000 !important; 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text h3 a 
 
{ 
 
\t color: #fff !important; 
 
\t font-size: 25px; 
 
\t letter-spacing: 1px; 
 
\t 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text h3 a:hover 
 
{ 
 
\t text-decoration: none; 
 
\t color: #000 !important; 
 
\t 
 
} 
 

 
.stylish-popular-widget .meta-text h3 :hover 
 
{ 
 
\t text-decoration: none; 
 
\t color: #000 !important; 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text span.date 
 
{ 
 
\t color: rgba(59,59,59,1); 
 
\t font-size: 11px; 
 
\t letter-spacing: 1px; 
 
\t padding-top: 30px; 
 
\t 
 
} 
 
.stylish-popular-widget:hover > .meta-text 
 
{ 
 
\t background: rgba(255,255,255,.8); \t \t 
 
\t top:inherit; 
 
    top: 0; 
 
\t \t 
 
}

\t \t \t \t <?php ?> 
 
\t \t \t \t 
 
\t \t \t \t <div class="stylish-popular-widget"> 
 
\t \t \t \t \t <a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?> 
 
\t \t \t \t \t <div class="meta-text"> 
 
\t \t \t \t \t \t <h3><a href="<?php echo get_permalink() ?>"> 
 
\t \t \t \t \t \t TEST</h3> 
 
\t \t \t \t \t \t <span class="date">thstrhsthths</span></a> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t <?php 
 
\t \t

kaynak

2016-03-27 Costas Vitts

Her neyse, '' hover '' (a) etiketi yerine '' wip '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' yerine '' '' '' '' '' '' '' '' '' '' '' '' '' 'ile değiştirmek zorundasınız. ve sonra ona boyutlar verebilirsin. – Narxx

Cevabınız için çok teşekkür ederim! Kodlamada yeni ve tüm sorularım ve hatalarım için üzgünüm ... Uygulanan bir çözümle bana bir örnek verebilir misiniz? –

Umarım bu yardımcı olur: https://jsfiddle.net/msyLj79n/ sadece bir örnek, ancak bunu yapmanın birçok farklı yolu var. – Narxx

bu deneyin:

.stylish-popular-widget:hover .meta-text h3 a { 
    color: black!important; 
}

Live jsFiddle Demo

kaynak

2016-03-27 10:55:46 Pedram

HEYYYYYY onun çalışma !! Sorunun ne olduğunu açıklayabilir misin? Kodlamada yeniyim ve bütün gece nasıl yapıldığını bulmaya çalıştı! –

karşılamadan, herhangi bir problemin yoktu. Bu kuralı eklemelisiniz, fakat nasıl çalışır? , sarmalayıcı üzerinde "hover" kelimesini kullanmanız gerekir. Bu durumda, kodunuzda ".stylish-popular-widget: hover", kodunuzu ".meta-text h3" şeklinde yazabilirsiniz. a 'ama daha önce aldığı için rengi geçersiz kılmanız gerekiyor, o zaman' önemli 'kullanmalısınız. – Pedram

teşekkürler adamım, gerçekten takdir :) –

} 
.stylish-popular-widget img 
{ 
    height: 150px; 
    max-width: 100%; 
} 
.stylish-popular-widget .meta-text 
{ 
    background: rgba(0,0,0,.3); 
    color:white; 
    bottom: 0; 
    top: 65%; /*adjust BG start position*/ 
    left: 0; 
    right: 0; 
    position: absolute; 
    text-align: left; 
    padding-left: 10px; 
    moz-transition: 1s; 
    ms-transition: 1s; 
    o-transition: 1s; 
    transition: 1s; 
    webkit-transition: 1s; 
} 

} 
.stylish-popular-widget .meta-text h3 
{ 

} 
.stylish-popular-widget .meta-text h3 a 
{ 
    color: inherit !important; 
    font-size: 25px; 
    letter-spacing: 1px; 


} 
.stylish-popular-widget .meta-text h3 a:hover 
{ 
    text-decoration: none; 
    color: inherit !important; 

} 

.stylish-popular-widget .meta-text :hover 
{ 
    text-decoration: none; 
    color:black; 

} 
.stylish-popular-widget .meta-text span.date 
{ 
    color: rgba(59,59,59,1); 
    font-size: 11px; 
    letter-spacing: 1px; 
    padding-top: 30px; 

} 
.stylish-popular-widget:hover > .meta-text 
{ 
    background: rgba(255,255,255,.8);  
    top:inherit; 
    top: 0; 

}

<div class="stylish-popular-widget"> 
        <a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?> 
        <div class="meta-text"> 
         <h3><a href="<?php echo get_permalink() ?>"> 
         TEST</h3> 
         <span class="date">thstrhsthths</span></a> 
        </div> 
        </a> 
       </div>

şey nedir? Metninizin renklerini kontrol eden meta-metni.

kaynak

2016-03-27 10:37:33 SCJ

Mutlaka bunu yapmak için birden :hover -s gerekmez. Eğer tasarımına bağlı, devralma kullanabilirsiniz:

.stylish-popular-widget .meta-text { 
    background: rgba(0,0,0,.3); 
    bottom: 0; 
    top: 65%; /*adjust BG start position*/ 
    left: 0; 
    right: 0; 
    position: absolute; 
    text-align: left; 
    padding-left: 10px; 
    moz-transition: 1s; 
    ms-transition: 1s; 
    o-transition: 1s; 
    transition: 1s; 
    webkit-transition: 1s; 
    color: #fff; 
} 

.stylish-popular-widget .meta-text h3 a { 
    font-size: 25px; 
    letter-spacing: 1px; 
    color: inherit; 
} 


.stylish-popular-widget:hover > .meta-text { 
    background: rgba(255,255,255,.8);  
    top: 0; 
    color: black; 
}

Ve muhtemelen tüm bu !important bildirimleri gerekmez. Jsfiddle veya codepen üzerinden çevrimiçi bir örnek verdiğinizde daha kolay olacaktır.

kaynak

2016-03-27 11:36:21

Arka plan üzerinde css geçiş efektleri VE üzerine gelin metin

cevap

İlgili konular