Nic727 Posted September 26, 2015 Share Posted September 26, 2015 Hi, I would like to know how to put text over an image in two ways. Thank you Link to comment Share on other sites More sharing options...
Ingolme Posted September 26, 2015 Share Posted September 26, 2015 Just make the image a background image. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 27, 2015 Share Posted September 27, 2015 <!DOCTYPE html><head><style>.option1 { width: 200px; position: relative; border: 2px solid red;}.option1 img {width: 100%; height: auto; }.option1 figcaption { position: absolute; left: 0; right:0; bottom: 0; margin: 10px; background-color: yellow;}.option2 { overflow: visible; }.option2 figcaption { margin: auto 30px -80%; z-index: 999; border: 1px solid black; bottom: 20%; }</style><html><body><figure class="option1"><img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"><figcaption>caption captioncaption caption caption caption caption captioncaption caption caption caption</figcaption></figure><figure class="option1 option2"><img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"><figcaption>caption captioncaption caption caption caption caption captioncaption caption caption caption</figcaption></figure></body></html> Link to comment Share on other sites More sharing options...
Nic727 Posted September 27, 2015 Author Share Posted September 27, 2015 (edited) Hi, Thank you. I found this small tutorial too :https://css-tricks.com/text-blocks-over-image/ Also, for the second option, I tried your code, but the text is bellow the image. I would like an image and the text starting over it (like 30px)... The text is a title + all the content I want. For example, the big image could be a featured image to present a project on my portfolio and after that a small text describing the project. Also, the background image is more if you want a background on your homepage than a small image with a caption right? Edited September 27, 2015 by Nic727 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2015 Share Posted September 28, 2015 (edited) <!DOCTYPE html> <head> <style> .option1 { width: 200px; position: relative; border: 2px solid red;} .option1 img {width: 100%; height: auto; } .option1 figcaption { position: absolute; left: 0; right:0; bottom: 0; margin: 10px; background-color: yellow;} .option2 { overflow: visible; } .option2 figcaption { z-index: 999; border: 1px solid black; margin: -30px 30px -100%;top:auto;bottom: auto;} </style> <html> <body> <figure class="option1"> <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> <figcaption>caption captioncaption caption caption caption caption captioncaption caption caption caption</figcaption> </figure> <figure class="option1 option2"> <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> <figcaption>caption captioncaption caption caption caption caption captioncaption caption caption caption</figcaption> </figure> </body> </html> Edited September 28, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Nic727 Posted September 28, 2015 Author Share Posted September 28, 2015 Thank you very much. Another question related to that. I saw a cool thing about item description for this template http://mycookroom.ru/mywork/Elegant/1.1/Site/Image/ And I would like to know how to do the small animation with text over image. I know it's possible with CSS3 animation, but I just don't know where to start.... I tried with the CSS used on this page (with developper tool), but the text was far away on top and there was no animation... So maybe with a hidden and when it's "over" the image, it turn to display block with a small CSS3 animation to go up? Thank you Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2015 Share Posted September 28, 2015 That is done using just JavaScript/jQuery Link to comment Share on other sites More sharing options...
Nic727 Posted September 28, 2015 Author Share Posted September 28, 2015 Ok. I thought it was possible to move things with CSS. But I still can make the text appear. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2015 Share Posted September 28, 2015 You would have to wrap each line of text in individual elements such as span, and use css3 animation to loop through each one. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now