2 divs hover effect, one img blur, другой текст hover

Когда я перемещаю мышку над изображением, он должен размываться (через CSS), и в то же время он должен появляться в тексте. Пока что так хорошо, но когда я перемещаю мышь на изображение, где на самом деле (все еще невидимый) текст, появляется только текст, но изображение не будет размытым.2 divs hover effect, one img blur, другой текст hover

http://jsfiddle.net/u8eY7/

Мой код:

<li><div id="blurbox"><div class="blur img"><div class="img-wrap"><div class="img-info"> 
       Wilkinson <br /> 
       Afterglow <br /> 
       RAM Records <br /> 
       13.</div> 
       <img src="images/cover/01-wilkinson-afterglow.png" class="hover" width="168" height="168"></div></div></div><div id="caption"> 

    .blur img { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    transition: 1s all; 
    overflow: hidden; 
    position: relative; 
    z-index:11; 
} 


    .blur img:hover { 
     -webkit-filter: blur(18px); 
     overflow: hidden; 
     width: 168px; 
     height: 168px; 
     position: relative; 
     border:3px solid white; 
     opacity: 0.6; 
     z-index:11; 
    } 

    .blur img:hover .img-info { 
     -webkit-filter: blur(18px); 
     overflow: hidden; 
     width: 168px; 
     height: 168px; 
     position: relative; 
     border:3px solid white; 
     opacity: 0.6; 
     z-index:11; 
    } 

    .img-wrap{ 
     height:168px; 
     overflow:hidden; 
     position:relative; 
     width:168px; 
    } 
    .img-info{ 
     bottom:0; 
     color:#fff; 
     opacity:0; 
     filter: alpha(opacity = 0); 
     position:absolute; 
     width:100%; 
    z-index:12; 
    line-height: 32px; 
    font-size: 26px; 
    font-family: "Helvetica Neue"; 
    text-align: left; 
    padding-left: 10px; 
    padding-bottom: 18px; 
    text-shadow: 0px 1px 2px rgba(150, 150, 150, 1); 
} 
.img-info h4, .img-info p{ 
padding:0 0px; 
} 
.img-wrap:hover .img-info{ 
    opacity:0.75; 
    filter: alpha(opacity = 75); 
    transition:opacity 1.75s; 
    -moz-transition:opacity 1.75s; 
    -webkit-transition:opacity 1.75s; 
}

источник

2013-10-14 dmnktoe

Можете ли вы предоставить http://jsfiddle.net/ свой код? – dowomenfart

Можете ли вы предоставить [скрипку] (http://jsfiddle.net)? Я не уверен, что следую этой проблеме, когда попытался воспроизвести то, что вы заявили –

извините http://jsfiddle.net/u8eY7/ – dmnktoe

заменить

.blur img:hover { 
    -webkit-filter: blur(18px); 
    overflow: hidden; 
    width: 168px; 
    height: 168px; 
    position: relative; 
    border:3px solid white; 
    opacity: 0.6; 
    z-index:11; 
}

.img-wrap:hover img { 
    -webkit-filter: blur(18px); 
    overflow: hidden; 
    width: 168px; 
    height: 168px; 
    position: relative; 
    border:3px solid white; 
    opacity: 0.6; 
    z-index:11; 
}

удалить это, как он никогда не будет применяться, и не полезно согласие к вашей структуре html

.blur img:hover .img-info { 
     -webkit-filter: blur(18px); 
     overflow: hidden; 
     width: 168px; 
     height: 168px; 
     position: relative; 
     border:3px solid white; 
     opacity: 0.6; 
     z-index:11; 
    }

Надеюсь, это то, что вы хотите. Как и вы, для img-info изображение должно также получить зависание, когда он зависает над .img-wrap и не использует классы как зависание и img. Было бы непонятно, когда вы пишете стили.

источник

2013-10-14 19:22:29

большое спасибо! – dmnktoe

2 divs hover effect, one img blur, другой текст hover

ответ

Смежные вопросы