HOW TO POSITION TEXT OVER IMAGE IN HTML CSS

[{"selector":"#anim-71054d6d-0773-4984-aae3-3fe5e99b6bd6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f97a2936-36f3-45ff-b938-81d23f764b39","keyframes":{"transform":["translate3d(0px, -600.51668%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-58f6abc8-d489-4243-8524-2554010db114","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ff474aed-dd8c-4485-8621-916b28a17f61","keyframes":{"transform":["translate3d(0px, 174.58389%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS

WRAP IMGE IN FIGURE CAPTION

[{"selector":"#anim-cd930e55-ab44-4778-b453-ac4a35fef3ca","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}] <figure class="textover"> <img src="IMAGE.jpg"/> <figcaption>CAPTION </figcaption> </figure> 01

POSITION TEXT OVER IMAGE

[{"selector":"#anim-be372120-e4ac-4b6d-86bf-24fdd279e25c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-93c0c518-ad70-4941-8699-b1425f201ce1","keyframes":{"transform":["translate3d(128.62190%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] .textoverimg { position: relative; } .textoverimg figcaption { position: absolute; top: 0; left: 0; } 02

EXTRA CSS COSMETICS

[{"selector":"#anim-ba041c09-48af-4774-929d-cbd203b29459","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-17bc4851-db5b-4474-9b19-e4062138771d","keyframes":{"transform":["translate3d(0px, 251.42449%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] .textover { max-width: 600px; } .textover img { width: 100%; } .textover figcaption { color: white; background: rgba(0,0,0,0.5); } 03

FULL TUTORIAL

[{"selector":"#anim-5e6b8db9-89d0-42b2-a2e4-9ba8070e66e2","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-f89f09e8-eaac-479d-890a-f31c3e697915","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-e13ab3c8-e7c0-4836-8f18-864bb0744f06","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}]

HOW TO POSITION TEXT OVER IMAGE IN HTML CSS

WRAP IMGE IN FIGURE CAPTION

POSITION TEXT OVER IMAGE

EXTRA CSS COSMETICS

FULL TUTORIAL

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST