How to make text center in image HTML CSS - html
I have a problem with text and image.
This is the design that i want it:
I already code this but I have a problem with the text and image
This is in HTML css:
here is the code :
#font-face {
src: url(source/font/SansitaSwashed-Regular.ttf);
font-family: 'Sansita';
}
/* Default Styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Sansita', sans-serif;
}
.container {
height: 100vh;
width: auto;
padding: 0;
}
.feature-showcase {
list-style: none;
width: 100%;
}
.feature-showcase li {
display: block;
float: left;
width: 33.3%;
/*3 li should occupy full width.*/
}
.meal-photo {
width: 100%;
margin: 0;
overflow: hidden;
/*This is to prevent spilling out of images when we scale the images.*/
background: #000;
text-align: center;
}
.meal-photo img {
opacity: 0.7;
width: 100%;
height: 50vh;
position: relative;
/*This will scale the image in proportion to the 25% width set for meals-showcase-li*/
transform: scale(1.15);
/*This is a part of our "animation" for food images.*/
transition: transform 0.5s, opacity 0.5s;
/*animation - changing from this css setting to another will take some time*/
}
.meal-photo img:hover {
opacity: 1;
transform: scale(1.03);
/*Not 1 because we want to cover some whitespace below each image.*/
}
.text {
text-align: center;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kemanaa</title>
</head>
<body>
<div class="container">
<ul class="feature-showcase">
<li>
<figure class="meal-photo">
<img src="source/image/oleh-oleh1.jpg" alt="">
<!-- <p class="text">Oleh oleh</p> -->
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/kuliner1.jpg" alt="">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/wisata1.jpg" alt="">
</figure>
</li>
</ul>
<ul class="feature-showcase">
<li>
<figure class="meal-photo">
<img src="source/image/oleh-oleh2.jpg" alt="">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/kuliner2.jpg" alt=>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/wisata2.jpg" alt=" ">
</figure>
</li>
</ul>
</div>
</body>
</html>
if you guys have another advice or better code, it will be great.
this text is just for It looks like your post is mostly code; please add some more details.
I would suggest using the images as background for the elements instead of setting an img tag.
Check the guide here: https://www.w3schools.com/cssref/pr_background-image.asp
Instead of using
.feature-showcase li {
display: block;
float: left;
width: 33.3%;
/*3 li should occupy full width.*/
}
Try using flexbox
I suggest using this as example
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This could be one way to do it. My example is very simple so maybe you could use it as a starting point.
Here is a Codepen.
I presumed you wanted to use actual image elements.
HTML
<div class="container">
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: 33.3333%;
height: 50%;
position: relative;
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.text p {
color: white;
}
you can use display:Grid
basic example:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.container {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container figure {
position:relative
}
.container figure img {
height: 100%;
width: 100%;
}
.container figure figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
font-size: 2em;
}
<div class="container">
<figure >
<img src="https://picsum.photos/id/251/500/300.jpg" alt="">
<figcaption>Oleh-oleh</figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/252/500/300.jpg" alt="">
<figcaption></figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/253/500/300.jpg" alt="">
<figcaption>Wisata</figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/254/500/300.jpg" alt="">
<figcaption></figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/255/500/300.jpg" alt="">
<figcaption>Kuliner</figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/256/500/300.jpg" alt="">
<figcaption></figcaption>
</figure>
</div>
Related
image redirect Centered
I'm new and I cant align my social redirect images to be centered to the "contact me" header. Text align doesn't work and other solutions I found for my problems just puts it in order vertically.
<link rel="stylesheet" href="styles.css">
<style>
.feature {
display: inline-block;
margin: 0px;
padding: 0px;
text-align: center;
}
.feature figure {
display: inline-block;
position: relative;
}
.resize {
text-decoration: none;
width: 128px;
height: 128px;
display: inline-block;
}
</style>
</head>
<body>
[HEADER]
<h1>Contact Me!</h1>
<section class="feature">
<figure>
<a href="url">
<img class="resize" src="images/discord.png" alt="Discord"></a>
<figcaption></figcaption>
</figure>
<figure>
<a href="url">
<img class="resize" src="images/insta.png" alt="Instagram"></a>
<figcaption></figcaption>
</figure>
</section>
</body>
</html>
Play around with the margins in .feature figure. I changed the size of the images and added a border to them so i could see what was going on.
.feature {
display: inline-block;
margin: 0px;
padding: 0px;
text-align: center;
}
.feature figure {
border: 1px solid #ccc;
display: inline-block;
margin: 0 8px;
}
.resize {
text-decoration: none;
width: 64px;
height: 64px;
display: inline-block;
}
[HEADER]
<h1>Contact Me!</h1>
<section class="feature">
<figure>
<a href="url">
<img class="resize" src="images/discord.png" alt="Discord"></a>
<figcaption></figcaption>
</figure>
<figure>
<a href="url">
<img class="resize" src="images/insta.png" alt="Instagram"></a>
<figcaption></figcaption>
</figure>
</section>
adding overlay to grid images on hover
I have an image gallery and would like to display text above it when hovering. I cannot set specific sizes to the image description because the grid resizes constantly. I know I could fix it with very specific media queries yet I don't want to do that. Is there a simple way for me to do it?
.figure-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}
.description {
opacity: 0;
background: black;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.img-container {
overflow: hidden;
width: 100%;
height: 100%;
}
figure:hover .description {
opacity: .8;
}
.d-name {
color: white;
font-size: 1.2em;
font-weight: 600;
}
.d-item {
color: white;
font-size: 1.1;
}
<figure class="figure3">
<img class="figure-img" src="images/propg" alt="5St.">
<div class="description text-center">
<p class="d-name">Tower</p>
<p class="d-item">Pnsulation</p>
<p class="d-item">topping</p>
</div>
</figure>
<figure class="figure4">
<img class="figure-img" src="image" alt="nehandler">
<div class="description text-center">
<p class="d-name"> Tower</p>
<p class="d-item">nsulation</p>
<p class="d-item">topping</p>
</div>
</figure>
<figure class="figure5 ">
<div class="img-container">
<img class="figure-img" src="images/pr34th-St%20rendering.jpg" alt="4h St">
<figcaption class="description text-center">
<p class="d-name"> Tower</p>
<p class="d-item">PInsulation</p>
<p class="d-item"> Firestopping</p>
</figcaption>
</div>
</figure>
changing the filling of the block when hovering
I want to make smt like this
img
Make background opacity and make visible two lines text and little picture (arrow) when hovering.
I know, i can make it just using other picture for background (make opacity in Photoshop), but i want to know how to make it with CSS
.futured {
padding: var(--product-padding);
display: grid;
grid-template-columns: repeat(4, 270px);
grid-template-rows: 1fr;
grid-gap: 30px;
}
.lamp{
background-image: url(http://anti-naruto.ru/img/product-1.jpg);
align-content: center;
padding: 30% 15px 30%;
}
.lamp p:first-child{
font-family: Montserrat;
color: #212121;
font-size: 1.369em;
font-weight: 700;
line-height: 1.369;
text-align: center;
opacity: 0;
}
.lamp p:first-child:hover{
opacity: 1;
}
.lamp p:last-child{
font-family: Montserrat;
color: #6c6c6c;
font-size: 0.871em;
font-weight: 300;
line-height: 1.578;
text-align: center;
opacity: 0;
}
.lamp p:last-child:hover{
opacity: 1;
}
.lamp:hover{
}
<div class="futured">
<div class="lamp">
<a href="#">
<p>Fishnet Chair</p>
<p>Seat and back with upholstery made of cold cure foam</p>
</a>
</div>
<img src="http://anti-naruto.ru/img/product-2.jpg" alt="">
<img src="http://anti-naruto.ru/img/product-3.jpg" alt="">
<a href="#"><img src="http://anti-naruto.ru/img/product-4.jpg" alt=""></ahttps://stackoverflow.com/questions/ask#>
</div>
You need to use absolute positioning to achieve this. Please see my snippet:
.item {
position: relative;
}
.item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(255, 255, 255, 0.8);
}
.item:hover .overlay {
opacity: 1;
}
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
In-line image and h (HTML/CSS)
I want to align in-line a profile image and its username inline. Here's the code: <div id="post"> <div class="proPic"> <img title="proPic" alt="Profile Picture" src=""> </div> <h3>Username</h3> <p>Text post</p> </div> What's the best way to do this? I'd like to see both HTML and CSS methods.
Here's a version using less code than you have already ;)
body {
font-family: arial;
}
.profile {
width: 25%;
float: right;
background: pink;
}
.profile h3 {
margin: 0;
padding: 0;
font-size: 14px;
min-height: 50px; /*Just for demo*/
}
.content {
width: 70%;
float: left;
background: #ccc;
min-height: 200px; /*Just for demo*/
}
<div class="post">
<div class="profile">
<img title="proPic" alt="Profile Picture" src="">
<h3>Username</h3>
</div>
<div class="content">
Text post
</div>
</div>
Image with overlay captions
I have a problem with image descriptions. I have HTML structure like this:
<div class="scrollable-content" data-mcs-theme="dark-thick" style="padding: 0px; overflow-x: auto;">
<ul style="list-style: none; white-space:nowrap; padding: 0px;">
#foreach($projects as $project)
<li style="display: inline; margin: 0px;">
<a href="{!! url($locale.'/projects/project/'.$project->id) !!}">
<img class="project-cover-image" src="/images/{!! $project->cover_image_name !!}" height="250px" width="auto">
</a>
</li>
#endforeach
</ul>
</div>
It creates a nice looking gallery with horizontal scrollbar. But I need to add descriptions to images that will be placed at the bottom of the pictures covering whole their widths and they should have to be transparent to some degree.
The problem is, whatever I do, I either get description that takes 100% width of the page, or it has width of the text inside it.
I have tried doing it with div, span, different combinations of position absolute/relative, everything and I couldn't manage to make it work.
It should look something like this:
How can I do that?
You have two options (wich produce the same result):
1- A div with a image as background, and a subtitle inside this div;
#image {
width:550px;
height:150px;
position:relative;
background: url('http://i.imgur.com/HNj6tRD.jpg');
background-repeat: no-repeat;
background-size:100% 100%;
}
.coverdown {
color: white;
width: 100%;
height: 30%;
position:absolute;
bottom:0%;
background: rgba(0,0,0,0.5);
text-align: center;
}
<div id="image">
<div class="coverdown">Subtitle here with a description.</div>
</div>
2- The image and a subtitle with position:absolute inside a position:relative container;
#container {
width:550px;
height:150px;
position:relative;
}
img {
width:550px;
height:150px;
position:absolute;
top:0px;
left:0px;
}
.subtitle {
color: white;
width: 100%;
height: 30%;
position:absolute;
bottom:0%;
background: rgba(0,0,0,0.5);
text-align: center;
}
<div id="container">
<img src="http://i.imgur.com/HNj6tRD.jpg" alt=img>
<div class="subtitle">Subtitle here with a description.</div>
</div>
use position:relative/absolute
body {
margin: 0
}
.scrollable-content {
padding: 0;
overflow-x: auto
}
ul {
list-style: none;
white-space: nowrap;
padding: 0;
margin:0
}
li {
position: relative;
display:inline-block
}
span {
background: rgba(0, 0, 0, .5);
display: inline-block;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
img {
display: block
}
a {
color: #fff
}
<div class="scrollable-content" data-mcs-theme="dark-thick">
<ul>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/250/250">
<span>description</span>
</a>
</li>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/500/250">
<span>description</span>
</a>
</li>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/400/250">
<span>description</span>
</a>
</li>
</ul>
</div>
basicly, you need relative/absolute as #dippas's answer.
as I advised, use inline-block, so it gets sized by content and will allow easily to position your description.
example below with figure and figcaption.
figure can be wrap in a <a>link displayed inline-block and figure as a block then to avoid a gap underneath.
figure {
display: inline-block;
position: relative;
margin: 0;
}
img {
display: block;
max-height:80vh;height:250px/*snippet demo purpose */
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
/* makeup*/
background: rgba(0, 0, 0, 0.5);
color: white;
}
/* demo purpose */
div {
white-space: nowrap;
overflow:auto;
}
figure {
white-space: normal;
text-align: center;
}
<div>
<figure>
<img src="http://www.hyperkreeytiv.com/wp-content/uploads/2014/08/IMG_4973.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://4.bp.blogspot.com/-oSEWgZNEopE/TtL8kfGuBzI/AAAAAAAAB6U/b8VSzZaoK3g/s400/action_wolf_1111_photo1.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://1.bp.blogspot.com/-GfOyrk3kZ0w/TewM0BMvbNI/AAAAAAAABM0/KPm3li5Xwko/s1600/alpha+male+Wallpaper__yvt2.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://www.ooyuz.com/images/2015/10/13/1447449028465.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
</div>