1

I have managed to get a text showing when having the cursor over an image, but now I want to position it so that it appears on the image, preferrably in the center of it. And I would also like to change the font size of it. As I am new to web development I am not sure how to arrange this.

JSFiddle with necessary info: http://jsfiddle.net/gGvb2/

HTML:

<article class="art-1"> <img src="nutrition.jpg"> <span>Nutrition</span></article>

CSS:

span { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; } img { width: 462px; } img:hover ~ span { opacity: 1; }

Any help is greatly appreciated!

Improve this question

1 Answer 1

Reset to default
1

I'd suggest relatively positioning the parent article element, and then absolutely positioning the span element relative to it. I'm not sure where you want the span to appear, but in this example it has a width of 100% and has text-align:center for horizontal centering.

UPDATED EXAMPLE HERE

span { opacity: 0; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; } img:hover ~ span, span:hover { opacity: 1; font-size:20px; font-weight:bold; } article { position:relative; display:inline-block; } article span { position:absolute; top:10px; left:0; width:100%; text-align:center; background:white; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.