Image with Slide Up Caption

Developer
Kw7oe
Size
2,578 Kb
Views
28,336
  1. Image with Slide Up Caption Previews
  2. Image with Slide Up Caption HTML Codes
  3. Image with Slide Up Caption CSS Codes

How do I make an image with slide up caption?

Image with slide up caption when it is hover.. What is a image with slide up caption? How do you make a image with slide up caption? This script and codes were developed by Kw7oe on 26 November 2022, Saturday.

Image with Slide Up Caption Previews
IQ Test

Image with Slide Up Caption - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image with Slide Up Caption</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class = "container">	<figure>	<img src = "https://hd.unsplash.com/photo-1457955233005-c6f38eeb2a63">	<figcaption>	<h1>Unknown</h1>	</figcaption>	</figure>
</div>
<div class = "bottom">	<p>Image Source: <a href = "https://unsplash.com"><em>Unsplash</em></a></p>
</div>
</body>
</html>

Image with Slide Up Caption - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Hammersmith+One|Source+Sans+Pro");
html { height: 100%;
}
body { background: linear-gradient(to top, #e6e6f6, #ffffff);
}
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.container figure { width: 350px; height: 350px; margin: 0;
}
.container figure img { width: 100%; height: 100%; transition: 0.6s height ease-in;
}
.container figure img:hover { height: 80%;
}
.container figure img:hover ~ figcaption { opacity: 1; transform: translateY(-100%);
}
.container figure figcaption { background: white; position: absolute; width: 100%; height: 20%; bottom: -20%; transition: 0.6s ease-in; opacity: 0; text-align: center;
}
.container figure figcaption h1 { margin: 15px 0 10px 0; font-family: "Hammersmith One";
}
.bottom { position: absolute; bottom: 10%; left: 50%; transform: translate(-50%, -10%);
}
.bottom p { font-family: "Source Sans Pro"; font-size: 12px;
}
Image with Slide Up Caption - Script Codes
Image with Slide Up Caption - Script Codes
Home Page Home
Developer Kw7oe
Username kw7oe
Uploaded November 26, 2022
Rating 3
Size 2,578 Kb
Views 28,336
Do you need developer help for Image with Slide Up Caption?

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!

Kw7oe (kw7oe) Script Codes
Name
Navigation Bars
Music Player
Image Hover Effects with CSS3 transform
Heat Map with D3.js
Image Slider
Tic Tac Toe
Weather App
Random Icon
Image Card
Portfolio
Create amazing art & images 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!