Add image and hover the text of the image

Question

How to Add Transparency when Mouse hover a image and only text of that image get highlighted. here is my code what is to edited or modified.

thank you in advance. Any of code change are welcome and other way to implement this thing is also welcome.

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

You don't have any image elements in your css (img)

Here is a CSS example for an opacity decrease while hovering over an element:

img{
opacity: 1;
}

img:hover{
opacity: 0.2;
}

Answer 2

Sample code.

 img{
    opacity: 3.0;
    }

img:hover{
opacity: 1.2;
}

Answer 3

You can use something like this. Image & text contained in link and when the link get hovered the image get low highlighted and the text be normal. And you can use position: absolute of you want the text to place somewhere in image.

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

the css

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