HomeОбразованиеRelated VideosMore From: zFunx Web Developement Ideas

CSS - Show Text Over An Image On Hover Without JavaScript ( With And Without Footer Text)

545 ratings | 49982 views
Note : This may not a SEO friendly approach. Learn how to place / show text over an image on hover without JavaScript ( with And without footer text) + On hover zoom effect. About me : https://www.youtube.com/c/zfunx/about Check the latest cross browser code at (updated on 4-sep-2017) : https://codepen.io/zFunx/pen/GveLaQ CSS used in this video ( without footer ) : .textOverImage{ position:relative; width:300px; height:300px; float:left; margin:4px; background-size:100%; background-position:center; transition:0.5s; } .textOverImage:hover{ background-size:110%; } .textOverImage:after{ position:absolute; top:100%; bottom:0; left:0; right:0; white-space:pre-wrap; overflow:hidden; background-color:rgba(0,0,0,0.6); color:#fff; padding:0 8px; opacity:0; content:attr(data-text); transition:0.5s; } .textOverImage:hover:after{ opacity:1; top:0; padding:8px; } .textOverImage:first-line{ color:#fff; font-weight:bold; font-size:1.5em; } ------------------------------------------------------------- CSS used in this video ( with footer ) : .textOverImage{ position:relative; width:300px; height:300px; float:left; margin:4px; background-size:100%; background-position:center; transition:0.5s; } .textOverImage:hover{ background-size:110%; } .textOverImage:after{ position:absolute; top:90%; bottom:0; left:0; right:0; white-space:pre-wrap; overflow:hidden; background-color:rgba(0,0,0,0.3); color:#fff; padding:0 8px; content:attr(data-text); transition:0.5s; } .textOverImage:hover:after{ top:0; padding:8px; background-color:rgba(0,0,0,0.6); } .textOverImage:first-line{ color:#fff; font-weight:bold; font-size:1.5em; } ----------------------------------------------------- Image used : http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg https://s-media-cache-ak0.pinimg.com/736x/36/66/76/3666764312573a54adef888747d0c8f3.jpg
Html code for embedding videos on your blog
Text Comments (118)
Note: If you are using landscape images use 'background-size:auto 100%;' in .textOverImage and 'background-size:auto 110%;' in .textOverImage:hover
Jimin Is sexy (10 months ago)
Does this even work
Renz Viaña (1 year ago)
my background image fast zooming in how do i slow it down
Ria (1 year ago)
thank you
Effie Daniels (7 days ago)
Awesome rollover effects, thank you for this vid. Just one question, how do I center the images to the middle of the page?
Put all elements inside a *div* and set its CSS as *text-align:center*
Reimon Maningding (13 days ago)
I followed the video but I can't view my work in the Browser using html, even php (localhost...).. am I the only one experienced this? :(
Try code from here: https://codepen.io/zFunx/pen/GveLaQ
Anna Koopmans (18 days ago)
why do you use inline css?
You can use any type of CSS for your comfort ;)
Nathan Zeon (1 month ago)
*Inner Light* by *Kevin Macleod*
Cherrie (2 months ago)
what is data-text??
You can use https://hastebin.com to share code. Save code and share link
Can you share your code?
Cherrie (2 months ago)
can you help me? my ':after' doesn't do anything
It's a custom attribute. You can create custom attributes by prefixing "data-". You can read more about it here https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
Mohammad S. Islam (2 months ago)
Many Many Thanks boss. Go ahead !!
Bryant Green (3 months ago)
Please, How can i make the text display outside the image (beside it) Thank You, this is a great tutorial..
Showing text beside image on hover or without hover?
Shwibi Shrabs (3 months ago)
Imagine your net going aw
Dave Villafane (5 months ago)
Thank you very much, But i just want to ask how can i put it all in the center
You can check here : https://codepen.io/zFunx/pen/zaeVGB
Put all things inside *div* and add CSS to that : display: flex; justify-content: center; flex-wrap: wrap;
GM Hunter (5 months ago)
can you make video make like this but on blogger Because it not wark in blogger
Virus (5 months ago)
how i can do that in my web sit bolgger Because i do like you but text and title posts not show
Virus (5 months ago)
this link my web
Virus (5 months ago)
What's your site? I'll check
NoPegiProduction (6 months ago)
Please excuse my stupid question, but I'm pretty stuck right now, as I would like to do a slideshow (or Carrousel), including this method to display text on hover. Do you see any way do to it? Thank you very much.
Ya ok👍
NoPegiProduction (1 month ago)
+zFunx Web Developement Ideas For now I've remade the whole page I was working on, I'm progressing slowly, but I'll try to give you a feedback soon!
NoPegiProduction (1 month ago)
+zFunx Web Developement Ideas Sorry, I didn't see your answer, thank you very much, I'll try to work my way from here!
Ok, check out this https://codepen.io/zFunx/pen/vrWGYW . Ask me if any other changes you need
att wno (6 months ago)
what a lovely effect! i love it. thanks for sharing. I have one question: is it possible to add hyperlink such as read more at the end of the text or not?
No, you can't use hyperlink using *content* property
Paul Elksnis (6 months ago)
really effective! thanks!
SotoZephyre (6 months ago)
This doesn't work for Notepad++?
SotoZephyre (6 months ago)
zFunx Web Developement Ideas No, you see when I copied this over to Notepad++ many of the commands didn’t work, like nothing happened. But I’ve figured out, I just needed to change some of the commands. But great vid still and great feedback! Keep up the good work
Notepad++ is an editor where you write code. Your code works or not depends on the browser. Is this you are asking?
Denice Ho (6 months ago)
awesome gonna apply it in my work tomorrow
MegaDanne35 (7 months ago)
First of all greate tutorial but I have one probem, I have a navigationbar wich has it position set to fixed but when so it folws when I scrol down but when we com to the image the navegationbar get palsed behind insted of over them. Can you pleas help me, it has to be done before Wensday.
milos bogdanovic (1 month ago)
I have the same problem as he did. What's "z-index"?
Have you tried setting higher value of z-index to navigation bar?
MegaDanne35 (7 months ago)
Of course not, I was the one who asked the question from the beginning.
Have you figured out?
MegaDanne35 (7 months ago)
How can I put the Pictures in the midel of the page? Replay as quic as posible :)
Use *align-text: center* in *body* or container in which these pictures are
Lezarcus Aceldam (9 months ago)
sir, how do i make the image a link so that if the image is clicked, it will direct the user to another website?
You can check my latest code : https://codepen.io/zFunx/pen/GveLaQ . It uses anchor tag instead of div
ItsTimlajim (10 months ago)
Hey, Is there anyway of doing this sort of thing but have it drop down from the top rather than the bottom?
Add *box-sizing:border-box;* to *subContainer* . You can adjust margin in *sub* . And put *main* and *footer* in the *body* , https://codepen.io/zFunx/pen/mXqpPJ
ItsTimlajim (10 months ago)
Well it still doesnt work, I can't make it responsive and be 415px x 700px. and I cant center the photos because when I do anything to them they just stretch
Any other help do you want?
ItsTimlajim (10 months ago)
This is my code https://codepen.io/Timlajim/pen/MQEmMb As I said this is my first time writing code so it might be painfully obvious to you, (kinda hope it is) I've uploaded the photos to imgur so that they'd work for you, usually these live on my computer so I use 'background-image: url(images/apple1.png); instead. I've also changed the width and height in 'subContainer to width:415px, height:700px; which I know wont make it responsive because it's not a % value but this is to show you how i wanted them to look. rather then them being squares. Thank you xoxo <3
Well check this responsive code https://codepen.io/zFunx/pen/wyqxPz
Dj Tsek (10 months ago)
I actually learnt css from this vid :p :)
Suman Rai (10 months ago)
how to justify this data-text
Try .textOverImage:after{text-align:justify;}
Rawan Tafech (1 year ago)
Hi there, I want to add an anchor element to the images too but I'm not sure where to place it. I tried putting it before the textOverImage div and within it - both didn't work. Would really appreciate your help
Check the latest code : https://codepen.io/zFunx/pen/GveLaQ
Stefan Clarke (1 year ago)
HTML file <div class="textOverImage"> <style="background-image:url('../images/luxuryroomtwo.jpeg')"> </div> <div class="textOverImage"> <style="background-image:url('../images/bedroombg.jpeg')"> </div> CSS file .textOverImage { width:300px; height:300px; float:left; margin:4px; background-size:100%; transition:0.5s; background-position:center; } .textOverImage:hover { background-size:110%; } My images will not show at all. Any idea as to why?
Stefan Clarke (1 year ago)
zFunx Okay will do. Thanks
It's good. It's simple. I have some suggestion : 1) Add some margin to the right of "scroll to button" 2) Make "navigation drawer opening and closing animations" and "scrolling down animation when clicking let's get started" little bit faster 3) Add some border-radius to "ATLANTIS" and "let's get started" and remove border 4) Give left and right padding to "ATLANTIS" 5) Remove borders from all buttons 6) Change on hover properties of buttons - > backgound: orange and color: white 7) Change cursor of hamburger icon to pointer (css -> cursor : pointer)
Stefan Clarke (1 year ago)
zFunx 😂 im a good programmer i swear. Hey, check this link out on your desktop or laptop and tell me what you think stefanc.computingboston.org Ive been told to create a website for my assignment for a fake hotel. Not long started it so some stuff will be "meh"
+Stefan Clarke I guessed 😂
Stefan Clarke (1 year ago)
zFunx 😑 yeah just realised i put <> fml😅 thanks aha
Green Eagles (1 year ago)
Renz Viaña (1 year ago)
my background image fast zooming in how do i slow it down
Rawan Tafech (1 year ago)
make the transition time longer
Try changing the transition time or change background-size greater than 110% in .textOverImage:hover
Simin Shaikh (1 year ago)
how can this be made responsive?
Check this https://codepen.io/zFunx/pen/VMrXyd . Not perfect but will give you an idea. Refer this too : https://spin.atomicobject.com/2015/07/14/css-responsive-square/
Abhilash George (1 year ago)
It is not working in Mozilla Firefox browser...
Abhilash George (1 year ago)
Thanks a ton buddy, you are genius, I subscribed you... :-)
I see, check the latest code here https://codepen.io/zFunx/pen/GveLaQ. Here I used both :after and :before
Abhilash George (1 year ago)
Any suggestions to make it work 'in all browser'
Fisikz (1 year ago)
this has taken hours of work out, and made things much simpler! thank you
Amirul Zafri (1 year ago)
It's beautiful...thank you so much. :D
G L (1 year ago)
is there any way to make the text a link?? or insert a small icon as link??? (instead of the whole pic?) thank you so much!!!!!!!
Hmm, no idea, but you can make the image a link. Check https://codepen.io/zFunx/pen/BRvLrN
G L (1 year ago)
Great video, thank you very much! Let me say, one letter, one semicolon , one little mistake and it won't work! Check your spelling guys! :)
Ageel (1 year ago)
Not working for me. I'm using an image from my pc. <!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> </style> <body> hello world <div class="textOverImage" style = "background-image:url(fire.jpg)"> </div> <!-- <div class="textOverImage" style = "background-image:url(https://richmedia.channeladvisor.com/ImageDelivery/imageService?profileId=12026539&id=1047193&recipeId=500)"> </div> --> </body> </html>
Are your html file and image in same folder? If yes, it should work. And it doesn't work with online editor like http://codepen.io/
Ageel (1 year ago)
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> </style> <body> hello world <div class="textOverImage" style="background-image:url(https://www.nature.com/article-assets/npg/nature/journal/v477/n7365/images/477415a-f1.2.jpg)"> </div> <div class="textOverImage" style = "background-image:url(https://s-media-cache-ak0.pinimg.com/736x/36/66/76/3666764312573a54adef888747d0c8f3.jpg)"> </div> </body> </html>
Abby Hawk (1 year ago)
Hi. What if I have the image in the computer an d not online.
Renz Viaña (1 year ago)
my background image fast zooming in how do i slow it down
If the name of your image is pic.jpg, and it is in the same folder as your HTML page, you could do like this : background-image:url(pic.jpg) If that image is in the folder named "images", and that folder is in the same parent folder as your HTML page, you could do like this : background-image:url(images/pic.jpg) If that image is in the folder whose path is "C:\Users\Owner\Documents", you could do like this : background-image:url(C:/Users/Owner/Documents/images/pic.jpg)
Vanita Jain (1 year ago)
Thanks a lot for such a nice tutorial. Just what I was looking for.
Valar Morghulis (1 year ago)
could I also manipulate the height of the hover thing? Thanks!
Try changing 'top' property in 'textOverImage:hover:after'
Wanzhen Tan (1 year ago)
How do you make the image clickable, linking it to php page??
Do you mean linking page ending with .php? Use a (anchor) in place of div. You can check here http://codepen.io/zFunx/pen/BRvLrN
Aeron Garcia (1 year ago)
Hi how can I put these href="#" in html. So it can go to another html. Nice video btw thanks. Hope you answer me
Aeron Garcia (1 year ago)
Thank you so much!
Use a (anchor) in place of div. Its working, you can check here http://codepen.io/zFunx/pen/BRvLrN
hans carl gnadou (1 year ago)
please help me, when use ":hover" it's don't work i'm confus
Rizwan Ahmad (1 year ago)
Hey why did it work without html
It can work. Omitting the html, head, and body tags is allowed by the HTML5 specs. But it is not recommended as it may not work in older browsers and may crash some html parser software. Always use <!DOCTYPE html> in the beginning.
Rizwan Ahmad (1 year ago)
Wow never seen such a fulfilling tutorial online its AWESOME thankx I wish you would make such totally understanable videos in future
Dan Smith (1 year ago)
Is their anyway I could place one of the images under the other?
Kristine (1 year ago)
When I want to add a 3rd picture it just stacks them all on the 2nd picture. Is there any way to continue to move them to the left when I add new pictures?
Just figured out. You are using ; after ' data-text="Bears are the best." ' and ' data-text="this is just a regular star." '. Use > .
Kristine (1 year ago)
Sorry for all the comments, but I notice it only seems to work in that editor. Anything outside of it it just layers the images on the 2nd picture. I even tried using pictures directly from the internet.
Kristine (1 year ago)
Okay, so when I do different URLs from the internet it works perfect. It's using my own images saved from the internet that it doesn't work.
Kristine (1 year ago)
I've written the code I have. I'm not sure if it matters that I don't use an actual image from the internet. It's from a picture I have saved on my computer. The first two pictures come out fine and show the text. It's when I add that third picture that I'm still having trouble. https://codepen.io/snowl3opard/pen/wdKvQg
I checked adding 3rd picture. It's working, you can check here https://codepen.io/zFunx/pen/PmPYpy. If you still have problem or I misunderstood your question, make an account on http://codepen.io/ , write your code there and share the link of that code here.
Kyle Andricic (1 year ago)
Any way to make SEO friendly?
Kyle Andricic (1 year ago)
Thanks a lot, man I'll give it a go. Props to you for good feedback and service.
Code shown in the video is having ease of re-usability with minimal code, but as we are using :after content which is the generated content which may not be SEO friendly, but I'm not sure. If you wanna be sure that your content should be SEO friendly, you can make the following changes : 1. Put your text in a div inside div with class textOverImage(every space and new line in that text matters, so be sure you hit "enter" after your desired text and remove unnecessary spaces), like: <div class="textOverImage" style="background-image:url(...)"> <div>Your Text</div> </div> 2. Replace ".textOverImage:after" with ".textOverImage > div" (and remove the content attribute from this class, by the way it doesn't matter) 3. Replace ".textOverImage:hover:after" with ".textOverImage:hover > div" 4. Replace ".textOverImage:first-line" with ".textOverImage > div:first-line"
Heeran Shin (1 year ago)
It was easy and effect was also Awesome!! Thank you !!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.