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

Question

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

заблаговременно. Любые изменения кода приветствуются, а также можно реализовать другой способ реализации этой вещи.

a { 
    color: #355f7c; 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

div.body p, div.body dd, div.body li { 
    text-align: justify; 
    line-height: 130%; 
} 

div.body h1, 
div.body h2, 
div.body h3, 
div.body h4, 
div.body h5, 
div.body h6 { 
    font-family: 'Trebuchet MS', sans-serif; 
    background-color: #f2f2f2; 
    font-weight: normal; 
    color: #20435c; 
    border-bottom: 1px solid #ccc; 
    margin: 20px -20px 10px -20px; 
    padding: 3px 0 3px 10px; 
} 

div.body h1 { margin-top: 0; font-size: 200%; } 
div.body h2 { font-size: 160%; } 
div.body h3 { font-size: 140%; } 
div.body h4 { font-size: 120%; } 
div.body h5 { font-size: 110%; } 
div.body h6 { font-size: 100%; } 

a.headerlink { 
    color: #c60f0f; 
    font-size: 0.8em; 
    padding: 0 4px 0 4px; 
    text-decoration: none; 
} 

Answer 1

код образца.

img{ 
    opacity: 3.0; 
    } 

img:hover{ 
opacity: 1.2; 
} 

Answer 2

У вас нет каких-либо элементов изображения в вашем CSS (IMG)

Вот пример CSS для уменьшения непрозрачности при наведении на элемент:

img{ 
opacity: 1; 
} 

img:hover{ 
opacity: 0.2; 
} 

Answer 3

Вы можете использовать что-то вроде этого. Изображение & текст, содержащийся в ссылке, и когда ссылка становится зависающей, изображение становится низким, а текст - нормальным. И вы можете использовать position: absolute, чтобы текст был размещен где-то на изображении.

<a href="#"> 
     <img src="" alt=""> 
     <span>Text</span> 
</a> 

CSS-

a { 
    display: block; 
} 
a:hover img { 
    opacity: 0.2; 
}