Bricks Builder - How to add hover effect to background image and text element in a div
#bricksbuilder #tutorials #hovereffect #backgroundeffect Hi everyone! This is the first video uploaded to Youtube in my life(still learning)! I share my little knowledge on Adding a hover effect to the div's background image and text element. -- TIMESTAMPS -- 0:00 How to add a hover effect to the background image and text element in a div 0:17 Let's get started 0:58 Add a background image and set the position 1:50 Add overflow:hidden Custom CSS code to the main container 2:22 Add gradient effect to the background image 2:59 Add a heading and a short description to the text holder 3:28 Set position for the text holder 3:50 Add custom CSS code to activate the hover effect 5:50 Add this code to make the hover effect move smoothly. 6:23 Let's see the impact on the front end. 6:45 Ended. Thank you for watching! I make videos by request for the moment. #basicguidesharing #howto *If you have any requests and want me to make a video for that, please let me know by commenting below. :) --------------------------------------------------------- โ โ โ ๐ฃ๐น๐ฎ๐๐น๐ถ๐๐ ๐ณ๐ผ๐ฟ ๐๐ฟ๐ถ๐ฐ๐ธ๐ ๐๐๐ถ๐น๐ฑ๐ฒ๐ฟ โ โ โ โบ https://jrns.co/yt-bricks โ โ โ Not a ๐๐ฟ๐ถ๐ฐ๐ธ๐ ๐๐๐ถ๐น๐ฑ๐ฒ๐ฟ user yet? ๐๐๐ ๐ถ๐ ๐ก๐ผ๐ โ โ โ โบ https://jrns.co/bricks *Create your website with #Bricks #Builder today โ โ โ ๐๐ฑ๐ฑ๐ผ๐ป๐ ๐ณ๐ผ๐ฟ ๐๐ฟ๐ถ๐ฐ๐ธ๐ ๐๐๐ถ๐น๐ฑ๐ฒ๐ฟ โ โ โ โบ PiotnetBricks: https://jrns.co/piotnetbricks โบ BricksUltimate: https://jrns.co/bricksultimate โบ MaxAddons: https://jrns.co/maxaddons โบ BricksExtras: https://jrns.co/bricksextras --------------------------------------------------------- โโ ๐ฆ๐๐ฝ๐ฝ๐ผ๐ฟ๐ ๐ ๐ ๐๐ต๐ฎ๐ป๐ป๐ฒ๐น โโ Buy me a coffee โบ https://jrns.co/buymecoffee Buy a product โบ https://jrns.co/links --------------------------------------------------------- โ โ โ ๐๐๐๐ค๐ข๐ข๐๐ฃ๐๐๐ ๐๐ ๐๐ค๐ค๐ก๐จ ๐ฌ๐๐ฉ๐ ๐๐ญ๐๐ก๐ช๐จ๐๐ซ๐ ๐ฟ๐๐จ๐๐ค๐ช๐ฃ๐ฉ๐จ โ โ โ ๐ฆ๐ฎ๐๐ฒ ๐ ๐ผ๐ฟ๐ฒ with ๐๐ ๐ฐ๐น๐๐๐ถ๐๐ฒ ๐๐ถ๐๐ฐ๐ผ๐๐ป๐ - โบ WPVivid Pro: https://jrns.co/wpvivid โ 20% โบ PiotnetForms: https://jrns.co/piotnetforms โ 20% โบ PiotnetGrid: https://jrns.co/piotnetgrid โ 10% โบ PiotnetBricks: https://jrns.co/piotnetbricks โ 10% โบ MaxAddons: https://jrns.co/maxaddons โ 10% - The ๐๐ผ๐๐ฝ๐ผ๐ป ๐๐ผ๐ฑ๐ฒ to enjoy ๐๐ ๐ฐ๐น๐๐๐ถ๐๐ฒ ๐๐ถ๐๐ฐ๐ผ๐๐ป๐ for all the products(those have โ ) above. ๐๐ผ๐๐ฝ๐ผ๐ป ๐๐ผ๐ฑ๐ฒ: โบโบ Jornes โโ *Use the links above and the coupon code above to enjoy an exclusive discount on ๐๐ก๐ฌ ๐ฃ๐น๐ฎ๐ป๐. --- โบ BetterLinks: https://jrns.co/betterlinks --------------------------------------------------------- โ โ โ ๐ฅ๐ฒ๐ฐ๐ผ๐บ๐บ๐ฒ๐ป๐ฑ๐ฒ๐ฑ ๐๐ผ๐๐๐ถ๐ป๐ด & ๐ข๐๐ต๐ฒ๐ฟ๐ โ โ โ โบ Hostarmada: https://jrns.co/hosting โบ Interserver: https://jrns.co/hosting-demo โบ Exabytes: https://jrns.co/exa-wp *๐๐น๐ข๐ฃ๐บ๐ต๐ฆ๐ด ๐ช๐ด ๐ข ๐ต๐ฐ๐ฑ ๐ธ๐ฆ๐ฃ ๐ฉ๐ฐ๐ด๐ต๐ช๐ฏ๐จ ๐ค๐ฐ๐ฎ๐ฑ๐ข๐ฏ๐บ ๐ฃ๐ข๐ด๐ฆ๐ฅ ๐ช๐ฏ ๐๐ข๐ญ๐ข๐บ๐ด๐ช๐ข. -- โบTidio Live Chat & Chatbot with Exclusive Discount: https://jrns.co/tidio-exclusive *๐๐ช๐ต๐ฉ ๐ฎ๐บ ๐ญ๐ช๐ฏ๐ฌ, ๐ต๐ฉ๐ฆ ๐ง๐ช๐ณ๐ด๐ต 50 ๐ค๐ถ๐ด๐ต๐ฐ๐ฎ๐ฆ๐ณ๐ด ๐ค๐ข๐ฏ ๐ข๐ฅ๐ฅ๐ช๐ต๐ช๐ฐ๐ฏ๐ข๐ญ๐ญ๐บ ๐จ๐ฆ๐ต 20% ๐ฐ๐ง๐ง ๐๐๐ ๐ด๐ถ๐ฃ๐ด๐ค๐ณ๐ช๐ฑ๐ต๐ช๐ฐ๐ฏ ๐ฑ๐ญ๐ข๐ฏ ๐ง๐ฐ๐ณ ๐๐ช๐ฅ๐ช๐ฐ! ๐๐ฉ๐ฆ ๐ฅ๐ช๐ด๐ค๐ฐ๐ถ๐ฏ๐ต ๐ธ๐ช๐ญ๐ญ ๐ฐ๐ฏ๐ญ๐บ ๐ฃ๐ฆ ๐ข๐ฑ๐ฑ๐ญ๐ช๐ฆ๐ฅ ๐ธ๐ฉ๐ฆ๐ฏ ๐ฑ๐ถ๐ณ๐ค๐ฉ๐ข๐ด๐ช๐ฏ๐จ ๐ต๐ฉ๐ฆ ๐ฑ๐ญ๐ข๐ฏ ๐ต๐ฉ๐ณ๐ฐ๐ถ๐จ๐ฉ ๐ฎ๐บ ๐ญ๐ช๐ฏ๐ฌ.
