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
€93.70
List Price:  €131.19
You save:  €37.48
£80.17
List Price:  £112.24
You save:  £32.07
CA$137.56
List Price:  CA$192.60
You save:  CA$55.03
A$155.17
List Price:  A$217.25
You save:  A$62.07
S$135.98
List Price:  S$190.37
You save:  S$54.39
HK$783.01
List Price:  HK$1,096.25
You save:  HK$313.23
CHF 90.89
List Price:  CHF 127.26
You save:  CHF 36.36
NOK kr1,101.16
List Price:  NOK kr1,541.68
You save:  NOK kr440.51
DKK kr699.21
List Price:  DKK kr978.92
You save:  DKK kr279.71
NZ$168.70
List Price:  NZ$236.19
You save:  NZ$67.48
د.إ367.21
List Price:  د.إ514.11
You save:  د.إ146.90
৳10,942.52
List Price:  ৳15,319.96
You save:  ৳4,377.44
₹8,353.31
List Price:  ₹11,694.97
You save:  ₹3,341.66
RM478.30
List Price:  RM669.64
You save:  RM191.34
₦129,687.03
List Price:  ₦181,567.03
You save:  ₦51,880
₨27,754.24
List Price:  ₨38,857.05
You save:  ₨11,102.81
฿3,676.55
List Price:  ฿5,147.32
You save:  ฿1,470.77
₺3,250.48
List Price:  ₺4,550.80
You save:  ₺1,300.32
B$523.28
List Price:  B$732.62
You save:  B$209.33
R1,903.66
List Price:  R2,665.20
You save:  R761.54
Лв183.15
List Price:  Лв256.41
You save:  Лв73.26
₩137,464.20
List Price:  ₩192,455.38
You save:  ₩54,991.18
₪378.95
List Price:  ₪530.55
You save:  ₪151.59
₱5,720.89
List Price:  ₱8,009.48
You save:  ₱2,288.58
¥15,440.72
List Price:  ¥21,617.62
You save:  ¥6,176.90
MX$1,696.11
List Price:  MX$2,374.63
You save:  MX$678.51
QR363.78
List Price:  QR509.31
You save:  QR145.52
P1,378.02
List Price:  P1,929.29
You save:  P551.26
KSh13,298.67
List Price:  KSh18,618.67
You save:  KSh5,320
E£4,850.08
List Price:  E£6,790.31
You save:  E£1,940.22
ብር5,673.01
List Price:  ብር7,942.45
You save:  ብር2,269.43
Kz83,741.62
List Price:  Kz117,241.62
You save:  Kz33,500
CLP$97,883.21
List Price:  CLP$137,040.41
You save:  CLP$39,157.20
CN¥723.83
List Price:  CN¥1,013.40
You save:  CN¥289.56
RD$5,893.56
List Price:  RD$8,251.22
You save:  RD$2,357.66
DA13,447.21
List Price:  DA18,826.63
You save:  DA5,379.42
FJ$227.04
List Price:  FJ$317.87
You save:  FJ$90.82
Q775.43
List Price:  Q1,085.64
You save:  Q310.20
GY$20,874.74
List Price:  GY$29,225.48
You save:  GY$8,350.73
ISK kr14,084.59
List Price:  ISK kr19,718.99
You save:  ISK kr5,634.40
DH1,011.98
List Price:  DH1,416.82
You save:  DH404.83
L1,789.85
List Price:  L2,505.87
You save:  L716.01
ден5,767.34
List Price:  ден8,074.51
You save:  ден2,307.16
MOP$804.17
List Price:  MOP$1,125.87
You save:  MOP$321.70
N$1,897.84
List Price:  N$2,657.05
You save:  N$759.21
C$3,669.73
List Price:  C$5,137.77
You save:  C$1,468.04
रु13,346.58
List Price:  रु18,685.75
You save:  रु5,339.16
S/375.13
List Price:  S/525.19
You save:  S/150.06
K378.96
List Price:  K530.57
You save:  K151.60
SAR375.09
List Price:  SAR525.14
You save:  SAR150.05
ZK2,519.95
List Price:  ZK3,528.03
You save:  ZK1,008.08
L466.17
List Price:  L652.66
You save:  L186.48
Kč2,369.01
List Price:  Kč3,316.71
You save:  Kč947.70
Ft36,915.02
List Price:  Ft51,682.51
You save:  Ft14,767.48
SEK kr1,089.22
List Price:  SEK kr1,524.96
You save:  SEK kr435.73
ARS$86,913.85
List Price:  ARS$121,682.87
You save:  ARS$34,769.02
Bs690.45
List Price:  Bs966.66
You save:  Bs276.20
COP$391,130.80
List Price:  COP$547,598.77
You save:  COP$156,467.96
₡49,957.95
List Price:  ₡69,943.14
You save:  ₡19,985.18
L2,461.44
List Price:  L3,446.12
You save:  L984.67
₲737,867.79
List Price:  ₲1,033,044.43
You save:  ₲295,176.63
$U3,889.78
List Price:  $U5,445.86
You save:  $U1,556.07
zł405.87
List Price:  zł568.23
You save:  zł162.36
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.