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;
}

Possible duplicate of [How do I give text or an image a transparent background using CSS?](http://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css) — Banzay, Jan 23 '17 at 07:52
"i want solution from beginning" - Read [ask], that isn't how [so] works, StackOverflow is here to *help* solve problems, not solve them for you. — Sayse, Jan 23 '17 at 08:00

score 0 · Answer 1 · answered Jan 23 '17 at 07:52

0

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;
}

answered Jan 23 '17 at 07:52

DudeOfLayers

130
2
10

score 0 · Accepted Answer · answered Jan 23 '17 at 07:56

0

Sample code.

 img{
    opacity: 3.0;
    }

img:hover{
opacity: 1.2;
}

answered Jan 23 '17 at 07:56

Farhan Ansari

279
2
14

score 0 · Answer 3 · answered Jan 23 '17 at 08:02

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;
}

Add image and hover the text of the image

3 Answers3