From the course: Dreamweaver CC: Responsive Design with Bootstrap 4
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Superimpose text on a card image - Dreamweaver Tutorial
From the course: Dreamweaver CC: Responsive Design with Bootstrap 4
Superimpose text on a card image
- [Instructor] In chapter three we used a combination of relative and absolute positioning to superimpose this main page heading over the hero image. Cards in Bootstrap 4 have a utility class that does it automatically. Let's see how to use it. So I'm going to scroll down to the bottom where I've inserted those cards and what I want to do is to put the headings at the top of each card over these images. So the first thing is to select one of the headings and then in the DOM panel, there it is, that h3 heading, we need to wrap it in a div. So right-click, Wrap Tag, and then apply the class card-img-overlay to that div. And once that's applied the heading jumps up over the top of the image. So let's quickly just do the other two headings. So far so good, but this is where it can get confusing. The card image overlay div is now selected, but I can't select any of the text underneath the image. And this is where Dreamweaver's Live view displays help. Notice that the blue border around…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.