Elementor Text Over Image On Hover With Title 👍👍👍👈
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Elementor Text Over Image On Hover With Title. Elementor is a great free WordPress page builder plugin. There is a free version as well as a paid version of Elementor. In this series of videos we will be building some great elements on our WordPress website with the Elementor builder.
In this video we are going to create a simple hover effect. We are going to create an image with a title in it. When you hover or tap anywhere over the image it will reveal some text content. This a very eye catching feature to have on your Elementor website. If visitors are mousing around your site and this effect happens it will get their attention quickly, which is what you want on a website!
There is a little bit of coding involved today to build this feature. Don't let the CSS coding put you off, it is very easy, and any code I write today I will paste below the video for you to use as you wish. You are welcome to copy the code and paste it into your site, CSS is a great thing to learn, so I encourage you to try out some of your own ideas to get familiar with it. You can't break your site with CSS, if something doesn't work simply delete the code to return back to how the site was previously.
So, follow along and see how easy it is to create a text over image on hover with title, to a page built with the awesome free or pro version of elementor page builder
For more information on the Elementor page builder plugin check out our Elementor playlist below.
My Elementor Video Playlist : • Elementor WordPress Pl...
Elementor Hover Effects Playlist: • Elementor Hover
Get Elementor: bit.ly/TryElementorToday
My Blog : web-design-and-tech-tips.com
--------- CSS CODE USED TODAY ---------
.th {
opacity:0;
transition-duration: 1.4s;
padding-top:180px;
margin-top:-180px;
}
.th:hover {
opacity:1;
}
--------- CHAPTERS ---------
00:00 Intro
00:38 Where To Add Code For Elementor Free
01:33 Add An Elementor Text Module
02:57 Add Column Background Image
04:00 Adjust Column Padding And Margin
04:35 Add Column Background Image
06:30 Add HTML CSS Class Name
07:35 Add Custom CSS Code
08:36 Add Hover CSS
10:21 Add Spacing To Trigger Hover
11:51 Add Hover Background Overlay
12:49 Result
--------- RECOMMENDED PLAYLISTS ---------
Elementor Ecommerce Store: • Elementor Ecommerce St...
Divi Snippets: • Divi 4 Snippets Divi T...
Divi 4 Ecommerce Store: • Divi 4 Ecommerce Store...
Bootstrap 4 Basics: • Bootstrap 4 Basics Ind...
Elementor: • Elementor Wordpress Bu...
WordPress Tips: • Wordpress 2020 Theme C...
--------- RECOMMENDED VIDEOS: ---------
Bootstrap 4 Complete One Page Scrolling Website Tutorial : • Bootstrap 4 Complete O...
Elementor Wordpress Builder One Page Scrolling Site In 15 Minutes: • Elementor Wordpress Bu...
Bootstrap - How to edit a bootstrap template: • Bootstrap - How to edi...
Divi Add a live facebook feed to your divi or any wordpress website: • Divi Add a live facebo...
Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: • Divi 4 Theme How To Bu...
Elementor Wordpress Builder How To Build A Parallax Section: • Elementor Wordpress Bu...
--------- SOCIAL MEDIA ---------
Follow what I'm doing on:
Facebook: / system22.net
Twitter: / 22itsolutions1
Linkedin: / jamie-henry-546b7377
Support the channel: paypal.me/system22
Courses I teach: www.udemy.com/user/jamiehenry2/
Subscribe: / @system22
#TH-camTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite - แนวปฏิบัติและการใช้ชีวิต
The way you teach us, very easy to lean!!!
Thank you for your video :)
Subscribed!!!
Awesome, thank you!
Great video, have been trying to do this for ages, and you made it so easy to follow!! Thank you so much.
Glad to help luigi Ryan - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
Thank you so much!!! This is exactly what I was looking for!
Glad to help Christine van der Pol - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
You are Great Thanks for your videos, your voice and explanations are like you were born to be a teacher
Glad to help Ali Heidarnia - Very kind of you to say so! - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
very helpful, thanks a lot. You explained this thing in a very simple way.
Glad to help @siammureed2391 - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
This was SO helpful. Thank you!
Glad to help AFTER Alcohol Free Magazine - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
Your Videos are fantastic!
Glad to help AlphaofAlphas - Check out our Divi Basics playlist for more videos like this: th-cam.com/video/RrceLQc64L8/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
Adam Buxton here doing the narration!
(good vid btw)
LOL CJW - Please like, share and subscribe if you have not done so already - Thanks!
Hi great video! I have Elementor Pro and was wondering how can I make an image on hover do the following: zoom/grow and change the color of the header below it (header is below the image and image only grows to size of the column)
First two are easy, you'd need to use javascript to cahnge the color of the header below tamarkov - Please like, share and subscribe if you have not done so already - Thanks!
I have three different classes within one image I would like to use this hover effect on. I have the heading, the text, and a hyperlink. I would like for them all to disappear and appear on hover using this technique. I tried to make them all the same class but it conflicts and only hovers one at a time. is there a way to make all the text within the text box appear and reappear?
Glad to help Axel Perez - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html&list=PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2 - Please like, share and subscribe if you have not done so already - Thanks!
Hello, thank you for this video and all your efforts, i'd like to know how to make it dynamic, i'm using jet engine to build a custom post type and i need to make a widget like this but dynamic.
Not sure if that is doable without some serious scripting Oussama Mounir Abdallah Djebarni - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html&list=PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2 - Please like, share and subscribe if you have not done so already - Thanks!
Checkout Our Playlists Page For Specific Topics: th-cam.com/users/System22Netplaylists
Sub: th-cam.com/channels/Yeyetu9B2QYrHAjJ5umN1Q.html
Hello
The video is exactly what I was looking for.
I don't have elementor pro, so I want to add the CSS part under "Customizer -> Additional CSS". When I insert the code, the "Publish" button remains grayed out. I cannot select it.
Does anyone know the solution for this?
Not sure why that is @DashmirKasa!
Can you also make the text animate upward too using css? That would look cool too
Glad to help Deyo Glines - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
@@System22 have done it all 👍
when i create the 3 columns the sizes are much smaller then this. When I add a photo its not showing the full photo.
be sure to set your image to cover in the background settings CJ M - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
@@System22 still doesn't work for me
is there a way to do this with all the text?
For sure Axel Perez - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html&list=PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2 - Please like, share and subscribe if you have not done so already - Thanks!
I tried this by adding a class to the column, then using .column:hover .th to control the opacity of the text when hovering over the box. Not sure if this is 'proper' though!
Glad to help Matt Connell - Lol, if it works it's 'proper'. As long as that is only effecting the column you want it to effect, then that is fine ! - Please like, share and subscribe if you have not done so already - Thanks!