Эффект наведения с изображением в качестве фона - PullRequest
Новая
       11

Эффект наведения с изображением в качестве фона

1 голос
/ 11 февраля 2012

Я не знаю, есть ли способ сделать это или нет. У меня есть изображение 

 <img src="images/thumb.png" />

Это свойство CSS этого изображения 

float:left;
border:solid 1px #dadada;
margin: 0 5px 0 5px;
padding:5px;
border-radius:4px;
-moz-transition: border 0.2s linear 0s;

Теперь я хочу добавить эффект наведения, но этот эффект наведения имеет фоновое изображение: 

    border:solid 1px #888888;
    opacity: 0.4;
    background: url(images/video.png) no-repeat;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */

Моя проблема в том, что мое фоновое изображение с эффектом наведения не отображается поверх моего изображения, как я хочу.

Любая помощь будет признательна. спасибо

Ответы [ 2 ]

2 голосов
/ 11 февраля 2012

Вы можете заключить элемент img в элемент div, примерно так: 

<div class="background">
    <img src="images/thumb.png" />
</div>

Затем вы можете применить фоновое изображение к элементу div вместо элемента img в состоянии наведения.

Ваш CSS должен выглядеть примерно так: 

img{
    float:left;
    border:solid 1px #dadada;
    margin: 0 5px 0 5px;
    padding:5px;
    border-radius:4px;
    -moz-transition: border 0.2s linear 0s;
}

img:hover{
    border:solid 1px #888888;
    opacity:0.4; /* You can remove this line*/
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.background{
    background: url(images/video.png) no-repeat;
    height: /* same as your img */
}
0 голосов
/ 11 февраля 2012

Вот простой способ сделать это с помощью jQuery.Все, что вам нужно сделать, это указать hoverImg="", а скрипт сделает все остальное автоматически. 

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg">

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.width())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});

Попробуйте здесь: http://jsfiddle.net/Diodeus/gYyBL/

...