Simple photo captions

Developer
Andy Hullinger
Size
2,030 Kb
Views
4,048
  1. Simple photo captions Previews
  2. Simple photo captions HTML Codes
  3. Simple photo captions CSS Codes

How do I make an simple photo captions?

What is a simple photo captions? How do you make a simple photo captions? This script and codes were developed by Andy Hullinger on 17 January 2023, Tuesday.

Simple photo captions Previews
IQ Test

Simple photo captions - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>simple photo captions</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <figure> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/felled-logs.jpg"> <figcaption> <h1>Blackmarket Lumber</h1> <p>These logs in Papua New Guinea were felled illegally on indigenous territory, where forests are protected.</p> <small>photo by National Geographic</small> </figcaption>
</figure>
</body>
</html>

Simple photo captions - Script Codes CSS Codes

/* basic reset and responsive image */
*{margin: 0; padding: 0; box-sizing: border-box;}
img{width: 100%;}
/* figure element Parent/Child technique */
figure{position: relative;}
figcaption{position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;}
/* Design styles */
figure{overflow: hidden;}
figcaption{ color:goldenrod; background-color: rgba(0,0,0,.7); display: -ms-grid; display: grid; padding: 5%;
}
figcaption h1{	font-family: Helvetica; font-weight: normal; font-size: 10vw;line-height: 0.8;
}
figcaption p{ font-family: Georgia; font-size: 4vw;
}
figcaption small{ -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; justify-self: end; color:white; text-transform: uppercase;
}
/* Place figcaptionin postition for start of animated transition */
figure figcaption{ -webkit-transform:translateY(100%); transform:translateY(100%); -webkit-transition: color .3s .5s ease, -webkit-transform .5s ease; transition: color .3s .5s ease, -webkit-transform .5s ease; transition: transform .5s ease, color .3s .5s ease; transition: transform .5s ease, color .3s .5s ease, -webkit-transform .5s ease;
}
figure:hover figcaption{ -webkit-transform:scale(1); transform:scale(1); color:red;
}
Simple photo captions - Script Codes
Simple photo captions - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded January 17, 2023
Rating 3
Size 2,030 Kb
Views 4,048
Do you need developer help for Simple photo captions?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Hullinger (andyhullinger) Script Codes
Name
Solved By Flexbox - an excerpt
Mageractive Week 1
Banner Example
Landing Page Demo
Hello Kitty Puppet Example TweenMax
My Quote Assignment
CSS type and layout - discrete elements
A Pen by Andy Hullinger
MFA iteration example
Simple Parallax ala Nike Better World
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!