Card Image Overlay

1 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€87.97
List Price:  €123.17
You save:  €35.19
£74.91
List Price:  £104.88
You save:  £29.97
CA$137.90
List Price:  CA$193.07
You save:  CA$55.16
A$154.36
List Price:  A$216.12
You save:  A$61.75
S$129.07
List Price:  S$180.70
You save:  S$51.63
HK$775.94
List Price:  HK$1,086.35
You save:  HK$310.40
CHF 82.34
List Price:  CHF 115.28
You save:  CHF 32.93
NOK kr1,026.97
List Price:  NOK kr1,437.80
You save:  NOK kr410.83
DKK kr656.49
List Price:  DKK kr919.11
You save:  DKK kr262.62
NZ$166.88
List Price:  NZ$233.64
You save:  NZ$66.75
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.91
৳12,188.92
List Price:  ৳17,064.98
You save:  ৳4,876.05
₹8,478.67
List Price:  ₹11,870.48
You save:  ₹3,391.80
RM424.01
List Price:  RM593.64
You save:  RM169.62
₦160,693.92
List Price:  ₦224,977.92
You save:  ₦64,284
₨28,187.10
List Price:  ₨39,463.07
You save:  ₨11,275.97
฿3,268.67
List Price:  ฿4,576.27
You save:  ฿1,307.60
₺3,864.02
List Price:  ₺5,409.78
You save:  ₺1,545.76
B$573.23
List Price:  B$802.54
You save:  B$229.31
R1,829.58
List Price:  R2,561.48
You save:  R731.90
Лв172.10
List Price:  Лв240.94
You save:  Лв68.84
₩139,271.81
List Price:  ₩194,986.11
You save:  ₩55,714.29
₪358.64
List Price:  ₪502.11
You save:  ₪143.47
₱5,540.32
List Price:  ₱7,756.67
You save:  ₱2,216.35
¥14,323.91
List Price:  ¥20,054.05
You save:  ¥5,730.14
MX$1,964.37
List Price:  MX$2,750.19
You save:  MX$785.82
QR364.06
List Price:  QR509.70
You save:  QR145.64
P1,361.73
List Price:  P1,906.48
You save:  P544.74
KSh12,933.70
List Price:  KSh18,107.70
You save:  KSh5,174
E£5,063.20
List Price:  E£7,088.68
You save:  E£2,025.48
ብር13,459.34
List Price:  ብር18,843.61
You save:  ብር5,384.27
Kz91,190.88
List Price:  Kz127,670.88
You save:  Kz36,480
CLP$93,924.60
List Price:  CLP$131,498.20
You save:  CLP$37,573.60
CN¥729.42
List Price:  CN¥1,021.22
You save:  CN¥291.80
RD$5,902.61
List Price:  RD$8,263.89
You save:  RD$2,361.28
DA13,237.82
List Price:  DA18,533.48
You save:  DA5,295.65
FJ$225.25
List Price:  FJ$315.36
You save:  FJ$90.11
Q770.30
List Price:  Q1,078.46
You save:  Q308.15
GY$20,924.33
List Price:  GY$29,294.90
You save:  GY$8,370.57
ISK kr12,872.71
List Price:  ISK kr18,022.31
You save:  ISK kr5,149.60
DH926.13
List Price:  DH1,296.62
You save:  DH370.49
L1,709.38
List Price:  L2,393.20
You save:  L683.82
ден5,422.88
List Price:  ден7,592.25
You save:  ден2,169.37
MOP$801.19
List Price:  MOP$1,121.71
You save:  MOP$320.51
N$1,867.19
List Price:  N$2,614.14
You save:  N$746.95
C$3,690.56
List Price:  C$5,166.94
You save:  C$1,476.37
रु13,561.38
List Price:  रु18,986.48
You save:  रु5,425.09
S/367.72
List Price:  S/514.83
You save:  S/147.10
K405.78
List Price:  K568.11
You save:  K162.33
SAR375.06
List Price:  SAR525.11
You save:  SAR150.04
ZK2,781.79
List Price:  ZK3,894.63
You save:  ZK1,112.83
L448.72
List Price:  L628.23
You save:  L179.50
Kč2,193.77
List Price:  Kč3,071.37
You save:  Kč877.59
Ft35,554.52
List Price:  Ft49,777.76
You save:  Ft14,223.23
SEK kr958.46
List Price:  SEK kr1,341.89
You save:  SEK kr383.42
ARS$119,486.47
List Price:  ARS$167,285.84
You save:  ARS$47,799.36
Bs693.19
List Price:  Bs970.49
You save:  Bs277.30
COP$428,680.91
List Price:  COP$600,170.43
You save:  COP$171,489.51
₡50,658.12
List Price:  ₡70,923.39
You save:  ₡20,265.27
L2,602.65
List Price:  L3,643.81
You save:  L1,041.16
₲803,267.16
List Price:  ₲1,124,606.16
You save:  ₲321,338.99
$U4,193.93
List Price:  $U5,871.67
You save:  $U1,677.74
zł376.19
List Price:  zł526.68
You save:  zł150.49
Already have an account? Log In

Transcript

Hello, in this bootstrap four video, we're going to show you how to overlay text on your image. So we've got an image right here. And we've got a bunch of text right here, but maybe we want, let's say just this block of text overlaid on top of the image. Instead of trying to put it inside the image, you're creating separate days and putting them together and styling them with some margin, and some different types of positioning. All you have to do. So I just want this entire div which has the header, the P, I mean, the text and the button to be overlaid on the image.

All you do is instead of doing color does block you call dash IMG dash overlay, save that. Refresh, and there you go. It's overlaid on the image, you might be thinking, it's not quite over the image because the button is I thought of it as just because the height of that block that div block that we overlaid was taller than the image. Obviously, you want to make sure that image is tall enough, maybe you don't, but most likely you will have that image overlays. If you have any questions, feel free to post them on our education platform, sonar learning.co.uk for slash question dot php, there'll be a link in the description to that. There'll be another link in the description to the source code from this video does the source code from every other video in this series, please rate, comment and subscribe.

And as usual, thanks for watching, and I hope you have a great day.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.