Html css

Question

Please can someone helps me that how to make the word in the card disappear when i put the mouse on the card.

https://code.sololearn.com/WpNk6YV0jYE2/?ref=app

Answer 1

In your code, you have 2 hover effects, one is for img (we can't see this image, on sololearn you need to use url to add images)
and one more hover is for text (h5 element)

When user hover over h5 element nested inside .col text change opacity to 1, and we cant see text.

You never tell in your code that it should change opacity when user hover over card.

Possible solution:
You already used position relative to position this text probably on top of image (as I said I can't see image here on sololearn), make this .layer class what have h5 inside to be same size as your card then add opacity on this class hover not just h5 .

Also h1 - h6 are header tags what give content more meaning, some practice is to use h1 for page title, and others for subtitles.
generally ideal is to use h1, h2, and h3.
Never use h tags to make text smaller or bigger, use css to change font size.

You used opacity and color with alpha: #ffffff00 last 2 zeros are alpha, and it does neer same thing as opacity, use one or other not both.

Answer 2

i put images you can see it now

Answer 3

https://t.me/Coders_Crafters join our Teligram group for discussion about HTML 5 & CSS codes questions and many more