This is what I am trying to recreate.
This is what I have so far for HTML:
.carousel-cell {
position: relative;
}
.board-text {
position: absolute;
top: 50%;
}
<div class="carousel-cell">
<img src="img/board1.png" alt="">
<div class="board-text">
<h4>Funboards</h4>
<h2>Chilli Rare Bird</h2>
<h3>$890</h3>
<p>Buy</p>
</div>
</div>
There is no way to place text over an <img> but you can create a box and then give the box the image as a background-image. Then you can write the text you want in the box.
HTML example: <div id="imageBox">Your text</div>
CSS: #imageBox{background-image: url(img/board1.jpg)}
Hope this helps ;)
I think you're looking for this
.carousel-cell {
position: relative;
}
.carousel-cell img{
width:600px;
}
.board-text {
position: absolute;
top: 50%;
transform:translate(0,-50%);
left:420px;
}
Related
I am creating a website and want to have two images side by side with a piece of text in the center of both images.
Html:
<div id="body">
<div class="image-row-container">
<img class="image-row image-row-1" src="assets/team-photo.JPG">
<p class="text-overlap" style="position: absolute; left: 25%; transform: translateX(-75%);">The Team</p>
<img class="image-row image-row-2" src="assets/test.JPG">
<p class="text-overlap" style="position: absolute; left: 75%; transform: translateX(-25%);">The Vehicle</p>
</div>
</div>
CSS:
.image-row {
display:inline-block;
width:50%;
height:500px;
}
.image-row-1 {
float:left;
}
.image-row-2 {
float:right;
}
So far, I have managed to place the two images side by side and horizontally align the text, but I can't figure out how to simply vertically align the text to the center of the images. If you have any tips of either my primary issue or any recommendations for tips on formatting, different methods, or poor code, it would be greatly appreciated. I am a novice so any help is good help!
I wrapped each image and text in an additional container, and then absolute positioned the text to be centered on top of the image. I think this is what you were looking for.
.image-row {
display: flex;
}
.image-container {
width: 50%;
position: relative;
}
.image-container img {
width: 100%;
height: auto;
}
.image-container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-weight: bold;
margin: 0;
}
<div class="image-row">
<div class="image-container">
<img src="https://placeimg.com/300/500/nature">
<p>The Team</p>
</div>
<div class="image-container">
<img src="https://placeimg.com/300/500/nature?t=1529100921702">
<p>The Team</p>
</div>
</div>
This is what I am trying to achieve:
An image positioned in between two separate div tag like facebook profile page:
I searched here but the solutions did not help much. It got positioned as I wanted but since it is bootstrap and it should responsive, when the screen size decreases the image position gets changed, which I do not want.
Here is the code(which might not be proper as I was just testing) -
HTML -
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
</div>
The CSS -
.container {
background-color: cadetblue;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -60px;
right: 200px;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
This is what I got after:
You could try to change the img-thumbnail to position: relative and use 'bottom: -60px' instead of positioning absolute, that can reposition the image without the use of absolute positioning
check it
.container {
background-color: cadetblue;
width:100%;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -90px;
left:15%;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
.bottom-div {
height:200px;
background-color:red;}
<head>
<meta name="viewport" content="width=device-width, initial-sclae=1">
</head>
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
<div class="bottom-div"></div>
</div>
Hi I want to add text over an image at its bottom center. Its a photo gallery project so all the images are of different dimensions. Css needs to work with the percentages so it works on images of all sizes
<div class="images">
<img src="dummy.jpeg">
<p>Some text to appear>
</div>
I tried reading many questions on stackoverflow but all of them works for one image. I have multiple images with different dimensions.
I want to put the text at the bottom center of the image and a black strip that goes with width 100% over the image. It could be the text background.
Use absolute positioning on the caption <p>
Make the container inline-block
Fiddle: jsfiddle.net/eohtwd1u
.images {
position: relative;
display: inline-block;
}
.images p {
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
left: 0;
}
<div class="images">
<img src="https://placehold.it/350x150">
<p>Some text to appear</p>
</div>
You can use CSS Flexbox. And for the text at the bottom of each image use position: absolute and making your parent position: relative.
Have a look at the snippet below:
.images {
display: flex;
padding: 5px;
}
.img-holder {
position: relative;
margin: 5px;
align-self: flex-start;
}
.img-holder p {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
margin: 0;
}
<div class="images">
<div class="img-holder">
<img src="http://placehold.it/100x100">
<p>Some text</p>
</div>
<div class="img-holder">
<img src="http://placehold.it/120x120">
<p>Some text</p>
</div>
<div class="img-holder">
<img src="http://placehold.it/150x150">
<p>Some text</p>
</div>
</div>
Hope this helps!
<!-- comment to fool the edit limiter -->
img{
width:500px;
height:200px;
}
.images{
width:500px;
height:200px;
align-items:center;
position:relative;
}
p{
position:absolute;
bottom:0;
color:yellow;
left:50%;
}
span{
position: relative;
left: -50%;
}
<div class="images">
<img src="https://i.stack.imgur.com/wwy2w.jpg">
<p><span>Some text to appear></span></p>
</div>
Well im trying to achieve a basic effect of 6 images placed next to each other ( 2 rows of 3) and want to add some text over them. But the problem is (I think) in the float = left "command" in the CSS, which indeed puts my images nicely next to each other... BUT throws all of my text in the one place instead of nicely with the appropriate image. I've been sitting and thinking on this for solid few days and have no idea what to do. Hope you can help.
CSS
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
}
.image {
float: left;
clear: both;
padding: 2px;
position: relative;
}
HTML
<body>
<div class="row" style="width:1600px">
<div class="container">
<img class="image" src="Life.jpg" alt="Life" style="width:520px;height:360px;" />
<p class="text">Life</p>
</div>
<div class="container">
<img class="image" src="Trees are Cool.jpg" alt="Trees Are Cool" style="width:520px;height:360px;" />
<p class="text">Trees are Cool</p>
</div>
<div class="container">
<img class="image" src="Radical dinosaurs.jpg" alt="Radical Dino" style="width:520px;height:360px;" />
<p class="text">Radical Dinosaurs</p>
</div>
<div class="container">
<img class="image" src="Big Round Vuttons.jpg" alt="Big Round Buttons" style="width:520px;height:360px;"/>
<p class="text">Big Round Buttons</p>
</div>
<div class="container">
<img class="image" src="Run.jpg" alt="Run" style="width:520px;height:360px;"/>
<p class="text">Run</p>
</div>
<div class="container">
<img class="image" src="Thats crazy.jpg" alt="That's Crazy" style="width:520px;height:360px;"/>
<p class="text">That's Crazy</p>
</div>
</div>
</body>
Use following css, this will solve your problem
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 0;
}
.container {
display: inline-block;
box-sizing: border-box;
padding: 2px;
position: relative;
}
the problem is that you are positioning your image to relative. but your .text is direct child of .container by default .text find it's parent to be position relative but .container has not apply css property position relative then it find .container parent to be position relative and so on, in the end html is position relative that's why all your code stack on the top of each other.
SEE DEMO
try this
.contailer{
position: relative;
}
Add position: relative to the .container class, so it will be the .text element context. The element is positioned in relation to the context.
The context is the last parent that has position: relative / absolute / fixed. Right now the context is probably some higher level container or even the body itself, so all .text items are concentrated there.
It has to do with the position of the elements like other have pointed out
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 50px;
left: 50px;
}
.image {
padding: 2px;
position: relative;
}
.container {
float:left;
}
https://jsfiddle.net/xqf8kfd1/1/
Give 'container' class style as follows:
.container {
position: relative;
}
And remove float: left; from 'image' class
try removing the position:absolute and adding float:left to the css text class
.text {
float: left;
z-index: 100;
color: black;
width: 100%;
display: inline-block;
}
I need to display an image on the top-right corner of a div (the image is a "diagonal" ribbon) but keeping the current text contained in an internal div, like stuck to the top of it.
I tried different things as including the image in another div or defining its class like:
.ribbon {
position: relative;
top: -16px;
right: -706px;
}
<div id="content">
<img src="images/ribbon.png" class="ribbon"/>
<div>some text...</div>
</div>
but without any luck. The best result I got was all the text scrolled down for the same height size of the image.
Any idea?
You can just do it like this:
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="content">
<img src="images/ribbon.png" class="ribbon" alt="" />
<div>some text...</div>
</div>
Position the div relatively, and position the ribbon absolutely inside it. Something like:
#content {
position:relative;
}
.ribbon {
position:absolute;
top:0;
right:0;
}
While looking at the same problem, I found an example
<style type="text/css">
#topright {
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TRbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;
}
</style>
<a id="topright" href="#" title="TopRight">Top Right Link Text</a>
The trick here is to create a small, (I used GIMP) a PNG (or GIF) that has a transparent background, (and then just delete the opposite bottom corner.)
Try using float: right; and a new div for the top so that the image will stay on top.
Example below:
#left{
float: left;
}
#right{
float: right;
}
<div>
<button type="button" id="left" onclick="alert('left button')">Left</button>
<img src="images/ribbon.png" class="ribbon" id="right">
</img>
</div>
<p>some text...
the image is on the top right corner</p>
<p>some more text...</p>