Bootstrap 4 Hover Effects Image To Drop Down Text On Hover ?

Bootstrap 4 Hover Effects Image To Drop Down Text On Hover. Bootstrap 4 is an awesome platform, it's really fast loading and lightweight, if you are not creating a blog or e-commerce store I would recommend it over WordPress every time. Welcome to another bootstrap hover effects video, this is Jamie from system22.net and web-design-and-tech-tips.com – Well in our last video, we created this image to text on hover effect right here. Today we're going to do something very similar, but we're going to have a drop down. So if I move over here, when we hover over this image, you're going to see your text drop down from the top there. That's a nice little feature to have on your site, really easy to do.
Rather than starting from scratch, what we're going to do, we'll start from this position where we left off in the last video, and if you want to follow along, I’ve got a zip file of the project files down below the video, you can download them, and it'll be a zip file, so just extract it. You'll have the images and the index.html. Just double click on that. it'll open in your browser of choice, and you'll be starting at the same place as we are here. It's just going to save a bit of time on recoding these columns with the images behind them. But, if you want to do that, have a look at the first video, it will explain how to do it in that video. I’ll put that link below this video also for anybody that wants to watch that. So let's get started…


Original text to hover video: https://youtu.be/U57rY-UnaAU

Bootstrap Basics Playlist: https://www.youtube.com/watch?

v=PwUw2kgnkls&list=PLqabIl8dx2wocDgvU7lEirYjNNrm6iXGb

Bootstrap Hover Effects Playlist: https://www.youtube.com/watch?

v=jWfBKCy9Gow&list=PLqabIl8dx2wqjtG9yxffpRbUpoQaQYcbP

Build a One Page Scrolling Website: https://www.youtube.com/watch?v=yf-
EWQ6XtjU&list=PLqabIl8dx2wo0_B7yRhSO51iN1jpfmVCP

Columns video here: https://youtu.be/75cW0NMadUw

Download the free brackets text editor from here: http://brackets.io/

Starting project files download: https://web-design-and-tech-tips.com/wp-content/uploads/2021/03/Image-To-Text.zip

Todays project file download: https://web-design-and-tech-tips.com/wp-content/uploads/2021/03/Drop-Down-Text.zip

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

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

/* Image Columns */

.col1 {
background-image: url(bg1.jpg);
background-repeat:none;
background-size:cover;
height:300px;
overflow:hidden;
}
.col2 {
background-image: url(bg2.jpg);
background-repeat:none;
background-size:cover;
height:300px;
overflow:hidden;
}
.col3 {
background-image: url(bg3.jpg);
background-repeat:none;
background-size:cover;
height:300px;
overflow:hidden;
}

/* image To Drop Down Text */

.drptxt {
margin-top:-300px;
padding-bottom:600px !important;
transition-duration: 0.8s;
transition-timing-function: ease-in-out;
}

.drptxt:hover {
margin-top:0;
background:#00000080;
}
---------- RECOMMENDED PLAYLISTS ----------

Elementor Ecommerce Store: https://www.youtube.com/watch?v=Sl1Ye9XHhgY&list=PLqabIl8dx2wrrX3YsjpIEL8uq5LnSkrhA

Divi Snippets: https://www.youtube.com/watch?v=x8AURRJVlWE&list=PLqabIl8dx2woGTX6yFqbufkqv-29PiElB

Divi 4 Ecommerce Store: https://www.youtube.com/watch?v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Bootstrap 4 Basics: https://www.youtube.com/watch?v=PwUw2kgnkls&list=PLqabIl8dx2wocDgvU7lEirYjNNrm6iXGb

Elementor: https://www.youtube.com/watch?v=bYqbLiWWC-k&list=PLqabIl8dx2woAs4sOmMsgCU0cAqcyiDco

WordPress Tips: https://www.youtube.com/watch?v=3QlczYducdU&list=PLqabIl8dx2wpKhMW14Q1Rxwx864Zwx-1e

---------- SOCIAL MEDIA ----------

Follow what I'm doing on:

Facebook: https://www.facebook.com/system22.net/

Twitter: https://twitter.com/22ITSolutions1

Linkedin: https://www.linkedin.com/in/jamie-henry-546b7377/


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


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


Subscribe: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q


#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite