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

CSS - Show Text Over An Image On Hover With Blurred Background

260 ratings | 22565 views
Code used[Last updated on 18th Oct. 2017] : http://codepen.io/zFunx/pen/ZeJEzZ CSS filters don't work with IE. Reference for :not() CSS selector : https://tympanus.net/codrops/css_reference/not/ Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
Html code for embedding videos on your blog
Text Comments (47)
Thejus S Pattazhy (1 month ago)
Life saver man...
Suman Acharyya (2 months ago)
Thanks, this helps a lot
Sujal Paudel (4 months ago)
Thanks Alot.
Nurdin Abdulkadir (5 months ago)
thnks a lot sir
lThellRockl (6 months ago)
You are a legend. wish im as good as you
kevin wilmsen (6 months ago)
Thnx, but how do you get the text to start left top ?
Remove "text-align: center;" from ".textWithBlurredBg :not(img)" and adjust "top" in ".textWithBlurredBg :not(img)" and ".textWithBlurredBg h3"
Henry Campos (8 months ago)
AWESOME!!!! Thank you for your videos!
Putri Wulandari (9 months ago)
Thank you, I was about to cry when my code didn't work until I learned from your video!
Jacob Pieczynski (9 months ago)
Thanks! This was super helpful for the website I'm working on.
nadeem roshan (11 months ago)
I did everything but my h2 is not coming in the img instead its underneath it
skylar stanley (7 months ago)
Two steps. Make sure your Div container position is set to RELATIVE. Second part is to make sure your NOT(img) position is Absolute. please let me know if you have any questions. thank you!
Did you figure it out? Can i see your code?
Boonaw (1 year ago)
Who listen's to this bg music and thinks "Wow that's really good!"
Young Sauce (2 months ago)
Somebody who is forced to use youtube library.. :)
Nina Humphrey (1 year ago)
How do you make these images central, I can't do it!
Mahmood Hameed (1 year ago)
On wordpress, do i need to enter both the html and css codes? If so, i place the html code into say one of the pages where i want the image to be in so i paste the code into the 'text tab' is this correct? when i do that the text appears under the image and i am assuming that the hover feature doesn't work because i can't figure out where to enter the css code.. I have no clue about coding by the way ..
If you are adding images to almost all posts, you can read this http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ If you are adding images to some specific pages, you'll have to install a plugin for writing CSS. I personally use "WP Add Custom CSS" https://wordpress.org/plugins/wp-add-custom-css/. This will add "Custom CSS" section below your text tab.
JACK_NUFC (1 year ago)
When I add text it goes below the image instead of on top/ inside the image. Any tips on fixing this, would be greatly appreciated, thanks
Raghu P (7 months ago)
how did you get it done, may I know? Thanks.
JACK_NUFC (1 year ago)
zFunx thanks, I managed to figure it out and get it done
Put that text in a container like div, span, h1, h2, h3. For example : <span>Jack</span>
Chris Yenney (1 year ago)
Fantastic video! Thank you!
Daniel Ji (1 year ago)
Yo man great vid thanks:)
Daniel Zucak (1 year ago)
Great Tutorial! Just wondering, would there be a way to organise the images with "float" or similar to build a collage? Thanks again!
Daniel Zucak (1 year ago)
Okay, thank you I will give it a go! I have also subbed as well. Keep up the work!
As long as images have same dimensions, you can use "float" (instead of display:inline-block), but for images with different dimensions, I think, you should go with CSS Grids or CSS Flexbox
Jacek Olczyk (1 year ago)
Soner Games (1 year ago)
Thank you :)
xfe.kilam (1 year ago)
You are the savior.
Umar Adkhamov (1 year ago)
Great job!
Franny Rodriguez (1 year ago)
Great! Good job making it simple !
prince paolo robles (1 year ago)
Max Almonte (1 year ago)
Thanks for the great tutorial, you're awesome! Gracias :)
Maria S (1 year ago)
This is perfect. Was trying to recreate this effect with bootstrap unsuccessfully, much simpler to do this way.
Marlenis Sommers (1 year ago)
i got it to work, but if I hover over text, the effect goes away. I can fix this with jquery, but if someone has an pure css solution, I would love to hear it.
I have checked again, and everything is working. Can you show me your code(HTML & CSS code)?
Marko Marinković (1 year ago)
Awesome...thank you
Justin Sanchez (1 year ago)
hey awesome tutorial! I was wondering, how can you add an anchor to this to link to another page?
Justin Sanchez (1 year ago)
Use anchor tag <a> instead of <div>. Check the 3rd image at http://codepen.io/zFunx/pen/ZeJEzZ
Kelmara Lemos (1 year ago)
i tryied and nothing... =(
Raghu P (7 months ago)
Hi there, I'm trying to work this out as a featured post carousal slides and my code is actually an xml in blogger. I tried to copy the most pertinent code on to https://codepen.io/raghupara/pen/VGbEmx. Are you able to tell me what needs to be done to fix it? Thanks a ton in advance.
Nothing happened? Make an account on http://codepen.io/ , write your code there and share the link of that code here. I'll try to fix.
Mohamed Sudheer (1 year ago)
A Rodriguez (1 year ago)
thank you so much for this!

Would you like to comment?

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