Hover state Text

HTML & CSS
1

Hello, I want to put text after I hover over an image
on my PAGE. Currently I have a fade transition when I hover. I know it has to do with the :after state and possibly the content element as well but im not sure how to use them.

IMAGE that I am targeting:

CSS: .

.docs:hover {
   opacity: .2;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

HTML:

 <a href="pdf/IMPACTOGRAPHDEVICESCATALOG.pdf"><img class="docs" src="images/catalogimage.png" width="300" height="275" alt="catalogimages"></a>
2

Do you have the option to just modify the HTML?

3

what do you mean? where?

4

You mention you want text after the image, right? So after <img>

5

Right after I hover over it text appears.

6

Yeah, you don’t need ot do this with :after, but here’s how you’d do it.

a:hover:after {
  content:'thing';
}
7

wow I did try that before but instead of using the anchor I used the
like this but it did not work:

.doc:hover:after {
    content:'thing';
    
}

it worked but then how would you control the position of the text?

8

Where would you like it to be? You’d control it like any other normal element. Centered text? Display:block; and text-align:center it :slight_smile: .

9

The image is class=“docs” so that’s the first thing I notice about it not working :slight_smile: . But yeah images can’t have :after{} or pseudo elements like that.

1 Like
10

Yeah centered in the image.

I tried that but It seems like its not relative to image.
it goes off.

11

Could we get an example? I looked on the page but couldn’t find a section which had this implemented.

12

Yes I updated the PAGE.

13

Make hte .doc_dl display:inline-block :slight_smile: . That’ll make it relative.

14

I did that still the same kinda:

.doc_dl:hover:after {
    content:'Download';
    color:#da272f;
    font-size: 12pt;
    font-weight: bold;
    font-family: "open sans";
    text-decoration: none;
    margin-right: 3em;
    text-align: center;
    display: inline-block;
  
}
15

I didn’t say the :after element.

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.