I have an image that I want overlapping the banner but I am having a problem when I re-size the window the image does not move with it. Ive provided a screenshot and my css.
CSS:
.coslogo {
display: block;
margin: -150px auto 0;
top: 150%;
/*padding: 20px;*/
width: 100%;
left: 50%;
margin-left: 590px;
z-index: 9;
}
.coslogo img {
overflow: auto;
}
It looks like you have your position set to absolute because of how you are positioning your overlapping banner. You'll want to add position:relative; to the css for .coslogo. I can't be more specific without the html, so include that if this doesn't help!
You can use css relative and absolute positioning with z-index to place the image on one another.
.main {
border: 1px solid #000;
position: relative;
}
.img1 {
border: 1px solid #f00;
position: relative;
z-index: 2;
}
.img2 {
border: 1px solid #0f0;
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
}
<div class="main">
<img class="img1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
<img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
</div>
Related
This is my first post on this website and i will try to make my question as clear as possible. If it isn't clear i will try and explain as best as i can.
I'm making a responsive design with 2 images, later on i will add some more.
one of the images is the a part of the head which needs to be always on the bottom. The other part needs to be always on top. This needs to be responsive.
I did some research and found that the best way to do this is with %. I will post some code of my tries.
The code below this is just a technique that can be used to achieve something like i want.
.wrapper {
border: 2px solid #000;
position: absolute;
bottom: 0;
width: 90%;
margin: 0;
}
.outer {
position: relative;
width: 40%;
height: 120px;
margin: 0 auto;
border: 2px solid #c00;
overflow: hidden;
}
.inner {
position: absolute;
bottom: 0;
margin: 0 25%;
background-color: #00c;
}
.inner-onder {
position: absolute;
text-align: center;
top: 0;
background-color: #00c;
margin: 0 25%;
}
img {
width: 50%;
height: auto
}
<div class="wrapper">
<div class="outer">
<img class="inner " src="http://img.india-forums.com/images/600x0/57963-still-image-of-pooja-gaur.jpg" />
</div>
<div class="outer">
<img class="inner-onder " src="http://img.india-forums.com/images/600x0/57963-still-image-of-pooja-gaur.jpg" />
</div>
</div>
I have used relative width and an absolute position/horizontal transform of the parent container to give you the look you want.
Note: I took care of the gap created below the images in their containers by giving the containers a line-height: 0;
.container {
width: 50%;
border: 1px solid red;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.head, .body {
text-align: center;
line-height: 0;
}
img {
width: 100%;
}
/* in the case of the images I was working with I had to add the styles below because the head image was enlarged after being sliced from the body image. If you don't resize the head when you split the picture you won't need the extra styling */
.head img {
width: 38%;
transform: translateX(-14%)
}
<div class="container">
<div class="head"><img src="http://c7ee2562.ngrok.io/portfolio/img/head.png" alt="" /></div>
<div class="body"><img src="http://c7ee2562.ngrok.io/portfolio/img/thinkingn.png" alt="" /></div>
</div>
Screenshot:
img file pushes down to hover. How could I properly appear hover on image and place hover on image?
<div class="colunm5">
<img src="images/picture1.jpg">
<p class="colunm5_centered">aaaa</p>
</div>
.colunm5 {
width:340px;
height:378px;
border: 1px solid #000000;
display:inline-block;
position: relative;
bottom:155px;
}
.colunm5_centered {
width:340px;
height:378px;
vertical-align: top;
margin: 0;
text-align: center;
}
.colunm5_centered{
visibility: hidden;
}
.colunm5:hover .colunm5_centered {
background-color:rgba(0,0,0,0.3);
visibility:visible;
}
Your question is not too clear, but I guess that you want the partially transparent p to appear in the same location as the image, overlapping it, is that right?
In that case, all you need to do is position the p absolutely, since its parent is already positioned relatively.
position: absolute;
left: 0; top: 0;
Snippet:
.colunm5 {
width: 340px;
height: 378px;
border: 1px solid #000000;
display: inline-block;
position: relative;
bottom: 155px;
}
.colunm5_centered {
width: 340px;
height: 378px;
position: absolute;
left: 0; top: 0;
margin: 0;
text-align: center;
visibility: hidden;
}
.colunm5:hover .colunm5_centered {
background-color: rgba(0, 0, 0, 0.3);
visibility: visible;
}
<div class="colunm5">
<img src="http://i.stack.imgur.com/8w571.png">
<p class="colunm5_centered">aaaa</p>
</div>
Please note that I had to change the image URL to have something we can see.
I currently have a hover image and I am looking to add a right border #000 that only takes up 80% of the full length of the image. I have been trying to modify other "half border" codes to work for the right border to no avail.
Anyone know how?
Disclosure: Copied from here with a few changes.
Would this work:
#holder {
border: 1px solid #000;
height: 200px;
width: 200px;
position:relative;
margin:10px;
}
#mask {
position: absolute;
top: -1px;
left: -1px;
height: 80%;
width: 1px;
background-color: #fff;
}
<div id="holder">
<div id="mask"></div>
</div>
My suggestion would would be to create an overlay for your image that is 80% of its height.
.image-container {
position: relative;
width: 50%;
}
.image-overlay {
width: 100%;
height: 80%;
border-right: 1px solid #000;
}
.image-with-overlay {
position: relative;
}
Here's a working example: http://jsfiddle.net/dLk6xrvr/
Here is what I have so far: http://jsfiddle.net/F8AN4/
I want a border on each side of the div that is vertically centered and is pointing to the left/right sides of the screen. I've seen this done a lot, but can't for the life of me figure out how to do it!
It would look like:
-----|DIV|------
CSS
div {
background: lightgreen;
height: 100px;
margin: 0 auto;
position: relative;
width: 200px;
}
div::after {
border-right: 10px solid black; // not sure how to do this.
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
div::before {
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
Any ideas?
You will need two wrapping containers: an inner div that holds the content, and an outer div:
<div class="outer">
<div class="inner"></div>
</div>
The CSS is simple — the outer div will need to have 100% width (so that the pseudo-element can stretch to the full width), while the inner div can have a width that you designate later.
.inner {
background: lightgreen;
height: 100px;
margin: 0 auto;
width: 200px;
}
.outer {
position: relative;
width: 100%;
}
.outer:before {
border: 1px solid #000;
box-sizing: border-box;
content:"";
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
The CSS transform property is used to ensure that the pseudo-element is perfectly vertically centered — it matters when the horizontal line you want is thick.
If you want odd-numbered dimensions for the horizontal line, you can choose to specify the height of a single border, i.e. border-top: 1px solid #000;, or abandon the border property and set the height and background-color. It works either way :)
http://jsfiddle.net/teddyrised/F8AN4/9/
[Edit]: Remove the bottom margin on outer div, it was not necessary for the code to work ;)
FIDDLE
HTML
<div><span>TEXT</span></div>
CSS
div {
margin-top:10px;
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: lightgreen;
display: inline-block;
border-width:0 2px;
border-color:black;
border-style:solid;
}
Is this what you're looking for?
http://jsfiddle.net/F8AN4/3/
I guess there is a more beautiful way to do it maybe someone has a better idea :)
<div id="main">
<div class="hrleft"></div>
<div class="mid"></div>
</div>
div.hrleft {
height: 45px;
width: 200px;
border-bottom: 10px solid black;
float: left;
}
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.