Elementor Hover Use Media Queries To Stop Effect On Smaller Devices 👈

Elementor Hover Effects Using Media Queries To Stop Effect On Smaller Devices. Elementor is a great WordPress page builder plugin. We are going to be using the Elementor builder to create some great effects in this series of videos. Welcome to another elementor video. This is Jamie from system 22 and web-design-and-tech-tips.com - Well we created several elementor hover effects, this was one of them, and we had a question from someone that they love this hover effect, but they wanted to disable it on mobile. Let's just get this in mobile. If I hit my f12, I’m using google chrome here, and I can bring up the inspector tools. Let's just toggle the mobile version to on. As you can see it's doing the same thing on mobile as it is on the desktop, just scroll that up a little bit. They wanted to just turn this off, so they had a static image on one, and just the writing on the other, or whatever the original was. It's really easy to do. We have to use media queries for this, which is a bit of custom CSS. Don't let that put you off, any CSS I’ll write today I’ll put below the video, and you're welcome to use it and manipulate it however you need!

Elementor Pro Playlist:    • Elementor Pro How To Create A Justifi...  

Elementor Hover Effects Playlist:    • Elementor Hover Effects Image To Text...  

Elementor General Playlist :    • Elementor WordPress Plugin Full Width...  

Elementor Wordpress Builder One Page Scrolling Site In 15 Minutes:    • Elementor Wordpress Builder One Page ...  

Elementor Builder Create A Multi Page Wordpress Site In 15 Minutes:    • Elementor Builder Create A Multi  Pag...  

Elementor Ecommerce Store Playlist:    • Elementor Ecommerce Store Woocommerce...  

Elementor image to text video:    • Elementor Hover Effects Image To Text...  

Get Elementor From Here: http://bit.ly/GetElemrntor

My Blog : https://web-design-and-tech-tips.com

--------- CHAPTERS ---------

00:00 Intro
01:22 Find CSS Class
02:18 How It Works
02:55 Add Media Query
03:56 Add CSS Code
05:12 Test It Out
06:08 More Options
07:07 Result

--------- CSS CODE USED TODAY: ---------

/* Image Hover */

.hovbox {
opacity:0;
transition-duration:1.2s;
}

.hovbox:hover {
opacity:1;
}

.hbox {
opacity:1;
transition-duration:1.2s;
}

.hbox:hover {
opacity:0;
}

@media only screen and (max-width: 600px) {
.hovbox:hover {
opacity:0;
}

.hbox:hover {
opacity:1;
}
}

--------- RECOMMENDED PLAYLISTS ---------

Elementor Ecommerce Store:    • Elementor Ecommerce Store Woocommerce...  

Divi Snippets:    • Divi 4 Snippets Divi Theme Overview 👍  

Divi 4 Ecommerce Store:    • Divi 4 Ecommerce Store Theme Setup An...  

Bootstrap 4 Basics:    • Bootstrap 4 Basics Index Page and Ext...  

Elementor:    • Elementor Wordpress Builder Install A...  

WordPress Tips:    • Wordpress 2020 Theme Customize The Pa...  


--------- RECOMMENDED VIDEOS: ---------

Bootstrap 4 Complete One Page Scrolling Website Tutorial :    • Bootstrap 4 Complete One Page Scrolli...  

Elementor Wordpress Builder One Page Scrolling Site In 15 Minutes:    • Elementor Wordpress Builder One Page ...  

Bootstrap - How to edit a bootstrap template:    • Bootstrap - How to edit a bootstrap t...  

Divi Add a live facebook feed to your divi or any wordpress website:    • Divi Add a live facebook feed to your...  

Divi 4 Theme How To Build A Multi Page Website In 20 Minutes:    • Divi 4 Theme How To Build A Multi Pag...  

Elementor Wordpress Builder How To Build A Parallax Section:    • Elementor Wordpress Builder How To Bu...  

--------- SOCIAL MEDIA ---------
Follow what I'm doing on:

Facebook:   / system22.net  

Twitter:   / 22itsolutions1  

Linkedin:   / jamie-henry-546b7377  


Support the channel: https://paypal.me/system22


Courses I teach: https://www.udemy.com/user/jamiehenry2/


Subscribe:    / @system22  


#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite