Actually I I created an Image Slider using HTML and CSS. And I wanted to create a popup box. So before adding the functonality I created a layout for it and tried to make it in center. So when I write position:relative; bottom:300px(or whatever)it goes up but hides behind the image Slider.
.popup{
width: 900px;
height: 500px;
background-color: white;
border: 5px solid black;
position: relative;
bottom:0px;
}
<div id="slider">
<figure>
<img src="img3.jpg">
<img src="3.JPG">
<img src="4.JPG">
<img src="img3.jpg">
<img src="9.jpg" alt="">
</figure>
</div>
<center>
<div class="popup">
Dummy Text
</div>
</center>
Use z-index to specify the element you want on top:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Simply set your position with absolute.
.box .text{
position: absolute;
}
Demo jsFiddle
Related
I'm new to HTML and CSS. For one of my projects, I need to put 16 images into a 4x4 grid of tiles on a webpage. These tiles cannot have gaps between them, and they need to stretch to fill the browser from side to side. They also should only scroll vertically. We are only allowed to use JavaScript or JQuery so I can only use HTML and CSS.
I wrote 4 div elements, each represents a row; inside each div, a span element holds 4 images - that's how I made the 4x4 grid. A code snippet looks like this:
/* One row in a div*/
<div class="map">
<span>
<img src="map_images/1.png">
<img src="map_images/2.png">
<img src="map_images/3.png">
<img src="map_images/4.png">
</span>
</div>
I also wrote a navigation bar that should float above the background images in the upper right corner:
/* 4 div elements of 4 rows before this code*/
<div id="nav">
<div>Foo</div>
<div>Boo</div>
</div>
For the above code, my stylesheet looks like this:
.map{
margin:0;
padding:0;
}
#nav {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
However, I've encountered several problems at this point.
First, I still have column gaps and row gaps between all 16 images. No matter what values I set map margin and padding to, nothing changes. I even tried negative values, still nothing changed. Can someone tell me how to go about this problem, eliminating all gaps?
Secondly, I googled and learned that z-index can be used to make div float above background; however, this is no working here and it seems that div #nav stays in the upper right corner as a separate div that does take up space, instead of floating above. Any suggestions on this?
Float left and set the width to 25%. Also I show below how to create a floating menu using the :hover pseudo-class.
.map div img {
width: 25%;
float:left;
display: inline-block;
}
#nav {
width: 50px;
background-color: grey;
}
#nav ul {
margin: 0;
padding: 0;
width: 50px;
background-color: grey;
position: absolute;
display:none;
}
#nav:hover ul, #nav ul:hover {
display:block;
}
<div id="nav">
Menu
<ul>
<li>Foo</li>
<li>Boo</li>
</ul>
</div>
<div class="map">
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
</div>
I think you are looking for something like this? See fiddle http://jsfiddle.net/DIRTY_SMITH/q12bh4se/4/
Snippet :
body {
margin: 0px;
}
div {
width: 50%;
float: left;
}
img {
width: 50%;
float: left;
}
.top-left {
z-index: 9999;
position: absolute;
top: 0;
left: 0;
color: white;
}
.top-right {
z-index: 9999;
position: absolute;
top: 0;
right: 0;
color: white;
}
<h1 class="top-left">Top Left</h1>
<h1 class="top-right">Top Right</h1>
<div class="row-1-col-1">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-1-col-2">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-2-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-3-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
All I had to do was set float: left and width: 25% on the images in CSS
.map img{
float: left;
width: 25%;
}
DEMO
I'm trying to format an image so it aligns to the bottom of a div. I put what I think is the relevant code in a fiddle: http://jsfiddle.net/5KEyD/
<div id="main">
<div style="display: inline-block; margin-left: 15px">
<div id="imageWrapper">
<img id="bottomImage" class="aligncenter" src="Bottom-Text.png" alt="Some Image" width="800" height="152" /></div> </div></div>
#main{width:800px; height: 200px; padding-right:40px; overflow:hidden; background- color: #c0c0c0;}
#imageWrapper { position: relative; height: 152px; } /* height is for display purposes only */
#bottomImage { position: absolute; bottom: 0px; }
What I need is for the image to align (centered) all the way at the bottom, with no extra grey space under it.
Thanks for any help!
<div style="width: 800px; margin: 0 auto;">
<div id="imageWrapper">
<img id="bottomImage" class="aligncenter" src="/wp-content/uploads/2014/05/Bottom-Text.png" alt="Some Image" width="800" height="152">
</div>
</div>
I think that happens because of using display: inline-block for div element. Inline-block rule always adds 5px margins to element. So if you remove it the issue will be fixed. If you need that rule you can add -5px bottom margin.
In my page i have 2 images that i want show one of them on the another one, this is my code, how can i set images:
<div class="profile-image img-responsive">
<img src="images/pro.png"/>
<img src="images/2.png" class="img-circle">
</div>
JSFIDDLE
I want to set 2.png onto the left and bottom pro.png like this:
How can I do this?
The following code will display the second image over the first image. All the images and the image panel are responsive.
1.CSS
.profile-img {
width: 100%;
position: relative;
}
.img-responsive {
max-width:100%;
height:auto;
}
.img-circle {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}
2.HTML
<div class="profile-img">
<img class="img-responsive" src="images/pro.png" />
<img class="img-circle img-responsive" src="images/2.png" />
</div>
#bnuhero's answer is very good, and I would change it just a little.
First, basing off the jsfiddle, encapsulate the two images in a relative div. This will allow the image placed on top, when defined as "absolute" to be placed relative to the parent div, rather than relative to the entire window.
<div class="header-image">
<div class="profile-image" style="margin: 50px auto;">
<img src="http://s9.postimg.org/41fwo4k4v/pro.png" class="img-responsive"/>
<img src="http://s24.postimg.org/on764040x/image.png" class="img-circle img-responsive img-on-top">
</div>
</div>
</div>
Next, make a rule to define the realtive div. And make an additional class or id to target the image to be placed on top. Writing the rules with the same 'img-circle' class will interfere with the default 'img-circle' rules setup by Bootstrap
.header-image {
position:relative;
}
.img-on-top {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}
Updated jsfiddle at http://jsfiddle.net/Bavc_Am/jG9bP/1/
Update your css to this
.img-circle {
border-radius: 50%;
position: relative;
top: -69px;
left: 10px;
}
I'm trying to implement a feature for my website where hovering over an image shows its caption over the bottom of the image. Any tips on how to do this?
I was trying to do it, but something in the css template I'm using was interfering.
Here are the images I want to put captions for
<section class="5grid is-gallery">
<div class="row">
<div class="4u"> <img src="images/1a.jpg" alt="">
</div>
<div class="4u"> <img src="images/2a.jpg" alt="">
</div>
<div class="4u"> <img src="images/3a.jpg" alt="">
</div>
</div>
<div class="row">
<div class="4u"> <img src="images/4a.jpg" alt="">
</div>
<div class="4u"> <img src="images/5a.jpg" alt="">
</div>
<div class="4u"> <img src="images/6a.png" alt="">
</div>
</div>
</section>
Note: I tried to use these, not exactly sure what I was doing wrong.
http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
The code to achieve this would be something like this:
a {
position: relative
}
a span {
display: none;
position: absolute;
bottom: 0;
width: 100%;
padding: 10px;
background: rgba(255,255,255,.8);
}
a:hover span {
display: block
}
<a>
<img src="http://placehold.it/300x200">
<span>caption</span>
</a>
If JavaScript+jQuery is acceptable, try jQuery TipTip plugin: http://code.drewwilson.com/entry/tiptip-jquery-plugin
TipTip uses the title attribute just like the native browser tooltip does. However, the title will be copied and then removed from the element when using TipTip so that the browser tooltip will not show up.
You could use also CSS attr().
a {
position: relative;
}
a:hover:after {
content: attr(title);
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
z-index: 999;
background: #ccc;
color: black;
padding: 5px;
}
Could also use another attribute, like alt.
I am currently doing this with a table with 2 bottom-aligned cells. I am okay with the table solution, but just wondering if this is possible with (just css and html, no javascript).
Requirement:
* The sizes of the text and image are unknown, but the combined width of the two will not exceed the width of the containing element. (e.g. if i later want to change the image or the text, i do not want to dive into the ccs file)
* Image is aligned to the left, and the text (actually, a horizontal list) is aligned to the right.
Edit: In response to Kos,
the sizes of the text and images are dynamic, be it height or width, BUT the combined width of the two elements will not exceed the width of the containing element.
the image and text should be bottom aligned
the containing element should fit tightly the tallest element.
HTML
<div class="wrapper">
<img src="" class="image" />
<p class="text">Hello world!</p>
</div>
CSS
.wrapper {
position: relative;
width: 500px;
}
.image {
position: absolute;
display: block;
left:0;
bottom: 0;
}
.text {
position: absolute;
right:0;
bottom: 0;
}
EDIT: I added the appropriate HTML code.
EDIT 2: In case the height of the wrapper is unknown (only restriction is that .image has always to be higher than .text)
CSS
.wrapper {
position: relative;
width: 500px;
}
.image {
vertical-align: bottom;
}
.text {
position: absolute;
right: 0;
bottom: 0;
}
HTML
<div class="wrapper">
<img class="image" src="" />
<p class="text">
Hello world!
</p>
</div>
This should work I think:
HTML
<div class="outer">
<img src="" title="" />
<div class="text">Some text </div>
</div>
CSS
.outer {display: inline-block; width: 350px; }
.outer img {float: left;}
.outer .text {float: right; }
<div style="width:400px; overflow:visible; position:relative;">
<img src="#" alt ="#" style="float:left;"/>
<p style="position:absolute; bottom:0; float:right;">Lorem Ipsum</p>
</div>