How would I put headings in the center of each of these images? For example over the first one "Music" in the center of the image
<div class="row">
<div class="item">
<img src="images/music_cover.png"/>
</div>
<div class="item">
<img src="images/event_cover.png"/>
</div>
<div class="item">
<img src="images/lights_cover.png"/>
</div>
</div>
The below is the CSS code:
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The below is the HTML code.
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>
I hope this should work for you.
Suppose you introduced these headings into your HTML:
<div class="row">
<div class="item">
<h2>Heading 1</h2>
<img src="images/music_cover.png"/>
</div>
<div class="item">
<h2>Heading 2</h2>
<img src="images/event_cover.png"/>
</div>
<div class="item">
<h2>Heading 3</h2>
<img src="images/lights_cover.png"/>
</div>
</div>
You can achieve a quick centered heading result, over your images, by introducing the follow css:
.item {
position:relative;
}
.item h2 {
position:absolute;
text-align:center;
top:50%;
left:0;
right:0;
line-height:1;
margin-top:-0.5em;
}
Something like this I would imagine. Create a container that contains both your image and an absolute div to contain the text
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.item {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<div class="item">
<img src="images/music_cover.png" style="width:100%;"/>
<div class="centered">Centered</div>
</div>
</html>
Make the images backgrounds, use the different properties for position, attachment, size, etc. to get what you need
See https://developer.mozilla.org/en-US/docs/Web/CSS/background
Or a more reliable and scalable approach: put the image into an SVG via a tag (see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag) and add text to the SVG
Related
I want to add button to images (display a button on top of an image with center position). Thing goes well if the image is 100% width. But if it's 50% width, the button isn't centered on top of the image.
.container {
position: relative;
width: 100%;
max-width: 1000px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width: 200px; float:left;margin-left:15%">
<button class="btn">Button</button>
</div>
Wrong output:
Click to see the image
Thank you so so much!!
The button will stay in the center of container because the absolute position looks for nearest relative element.
now you have two options:
1- set image in center of container by adding a margin-left:25%
2- set container width to 50% instead of image width
look at this please :
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="https://picsum.photos/800/600" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
<div class="container">
<img src="https://picsum.photos/200/200" alt="Snow" style="width:50%; margin-left:25%;">
<button class="btn">Button</button>
</div>
<div class="container" style="width:50%">
<img src="https://picsum.photos/200/200" alt="Snow" style="">
<button class="btn">Button</button>
</div>
Code Pen
I suggest you style it like this. The container is dimensioned by the image size, and the button is positioned absolutely relative to the container at 50% horizontally and vertically by the half of its own dimensions, then translated leftwards and upwards by the half of the button's dimensions (-50%, -50%).
.container {
position: relative;
display: inline-block;
}
.container>img {
display: block;
}
.container>button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
<div class="container">
<img src="https://www.cinematheque.fr/cache/media/01-films/la_maison_du_docteur-e/s,725-75eea0.jpg">
<button>Button</button>
</div>
<div class="container">
<img style="width: 200px;" src="https://www.cinematheque.fr/cache/media/01-films/la_maison_du_docteur-e/s,725-75eea0.jpg">
<button>Button</button>
</div>
How can I position text vertically beside an image next to its bottom right corner? The image is always centered but it isn't always the same size, it can have different width and height.
Example of what I am trying to accomplish
Here is the Codepen
.featuredimg {
position: relative;
text-align: center;
margin-bottom: 20px;
}
.author {
position: absolute;
right: 0;
bottom: 0;
transform: rotate(90deg) translate(-50%,-100%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="featuredimg">
<img src="https://via.placeholder.com/550">
<div class="author">Author: Asadfasdfasdf</div>
</div>
<div class="featuredimg">
<img src="https://via.placeholder.com/850">
<div class="author">Author: Asadfasdfasdf</div>
</div>
<div class="featuredimg">
<img src="https://via.placeholder.com/1250">
<div class="author">Author: Asadfasdfasdf</div>
</div>
Apply display: inline-block to the image/s and use transform-origin: bottom right on the rotated element which contains the text. You can use the bottom parameter in .author to fine-tune the exaxt vertical position of the text.
.featuredimg {
position: relative;
text-align: center;
margin-bottom: 20px;
display: inline-block;
vertical-align: bottom;
}
.author {
position: absolute;
right: 0;
bottom: 4px;
transform: rotate(90deg);
transform-origin: bottom right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="featuredimg">
<img src="https://via.placeholder.com/550">
<div class="author">Author: Asadfasdfasdf</div>
</div>
<div class="featuredimg">
<img src="https://via.placeholder.com/850">
<div class="author">Author: Asadfasdfasdf</div>
</div>
<div class="featuredimg">
<img src="https://via.placeholder.com/1250">
<div class="author">Author: Asadfasdfasdf</div>
</div>
How do I get the two images contained within the two divs to display side-by-side? I've tried changing the variables within container as display: inline-block; and float: left; as suggested by some other threads, but those did not work the way I tried them.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
How it looks:
I want these to be displayed side-by-side, not on top of one-another.
If you wrap the two containers in a div set to display: flex you'll be fine.
<div class="wrapper">
<div class="container">
<!-- your content -->
</div>
<div class="container">
<!-- your content -->
</div>
</div>
.wrapper {
display: flex;
}
I hope it helps :)
Simply add float:left to the container class.
Result:
what is the HTML with CSS Code to align have logo and text in the same line...that it must look as shown in the below pattern..
HTML:
<div class="top_left">
<div class="header">
<img src="https://b.fastcompany.net/multisite_files/fastcompany/imagecache/inline-small/inline/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" alt="logo"/> <br/>
</div>
<h2 id="site-title"><a>GOOGLE</a>
<div id="site-description">SEARCH ENGINE </div>
</h2>
</div>
You can use the following html/css combo:
/* CSS */
.container-div {
position: fixed;
top: 0px;
left: 0px;
width: 250px;
height: 150px;
}
.img-div {
display: inline-block;
position: relative;
width: 45%;
height: 100%;
overflow: hidden;
}
.img-div img {
position: absolute;
top: 0px;
left: 5%;
width: 90%;
height: 50%;
border: 1px solid red;
}
.img-placeholder {
position: absolute;
top: 7.5%;
left: 15%;
}
.text-div {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
border: 1px solid green;
overflow: auto;
}
<!-- HTML -->
<div class="container-div">
<div class="img-div">
<img />
<p class="img-placeholder">
Image Goes Here
</p>
</div>
<div class="text-div">
<h2>
Texty-text
</h2>
<p>
Sub-texty-text
</p>
</div>
</div>
Use this code
<p><img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg" alt="imag" style="height: 50px;width: 50px;"><span>kiran</span></p>
hello try to make a container for the logo and the text and a few div with a float that would do the job if i am right
like this
<div class="name of class you made" //give jut a with>
<div class="logo" //put float in this with a with>logo</div><div class="tekst" //put float in this with a with>tekst</div>
</div>
i am not sure but this would help
You can either use (on the h4 elements, as they are block by default)
display: inline-block;
Or you can float the elements to the left/rght
float: left;
Just don't forget to clear the floats after
clear: left;
Try something like this
<div class="container">
<div id="logo">
<img src="http://placehold.it/150x100">
</div>
<div id="text">
<h2>Hello</h2>
<h3>World</h3>
</div>
</div>
CSS:
.container > div {
display: inline-block;
padding: 5px;
}
#logo, #text {
float: left;
}
Here's the fiddle
.framework {
position: absolute;
}
.headerimg {
margin: 0 auto;
}
<body>
<div class="framework">
<div class="header">
<div class="headerimg">
<img src="Header.jpg">
</div>
</div>
<div class="navbar"></div>
</div>
</body>
This is the code I've got and the margin: 0 auto; doesn't work. Can anyone help me?
Use transformto center horizontaly
.framework {
position: absolute;
display: block;
width: 100%;
}
.headerimg {
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
<body>
<div class="framework">
<div class="header">
<div class="headerimg">
<img src="Header.jpg">
</div>
</div>
<div class="navbar">
</div>
</div>
</body>
In order to center things with margin auto you need to specify a width for the element you want to center and also set the parent elements width to 100%.
.framework {
position: absolute;
width:100%;
}
.headerimg {
margin: 0 auto;
width:300px;
display:block;
}