на изображении наведите указатель мыши на изображение

Question

То, что я пытаюсь достичь, - наведите курсор на изображение, отобразите наведите указатель на изображение; Я создал это JsFiddle, но я точно не знаю, как добиться того, что я пытаюсь сделать.

.hover { 
 
    \t background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png"); 
 
    \t height:75px; 
 
    \t width:75px; 
 
      background-size: contain; 
 
      opacity:0.7; 
 
      }

<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/> 
 
    
 
    <div class="hover"></div>

Answer 1

<div class="img"> 
<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/> 
<div id="hover"></div> 
</div> 

.img:hover #hover{ 
    display:block; 
} 

    #hover { 
       background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png"); 
       height:75px; 
       width:75px; 
      background-size: contain; 
      opacity:0.7; 
      position:absolute; 
      left:0; 
      top:0; 
      display:none; 
    } 

Работа скрипку https://jsfiddle.net/kcdued0s/3/

Answer 2

Попробуйте как этот

.hover:hover { 
    opacity:1; 
    } 

Answer 3

Я бы обернуть его в содержащей DIV (hoverwrap), это относительно позиционируемых , Ему просто нужен атрибут, поэтому дочерний элемент, который позиционируется как абсолютный, примет это как привязку вместо документа.

Затем установите свой параметр ширины на обертке и установите дочерние элементы шириной 100%, чтобы он всегда заполнял размер обертки.

Тогда есть скрытие изображения по умолчанию, и показывать только при наведении курсора мыши. (Сделано со значением display:none и display:inline-block

.hover { 
 
    background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png"); 
 
    background-size: contain; 
 
    opacity: 0.7; 
 
} 
 
.hoverwrap { 
 
    position: relative; 
 
} 
 
.hoverwrap img { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.hoverwrap .hover { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: none; 
 
} 
 
.hoverwrap:hover .hover { 
 
    display: inline-block; 
 
}

<div class="hoverwrap" style="width:75px;height:75px"> 
 

 
    <img src="http://i.imgur.com/QQzdPIF.jpg" /> 
 

 
    <div class="hover"></div> 
 

 
</div>

Answer 4

Вы можете сделать это с помощью CSS

<div> 
    <img ... /> 
    <div class="hover"></div> 
</div> 

.hover{ 
    ... 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
} 
img:hover .hover { 
    display:block; 
} 

Answer 5

Использовать абсолютную позицию для наведения на изображение

.hover { 
     background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png"); 
     height:75px; 
     width:75px; 
     background-size: contain;  
     opacity:0.7; 
     display: none; 
     position: absolute; 
     top : 0; 
     left: 0; 
} 
    img:hover ~ .hover { 
    display:block; 
}