I am trying to build an overlay (mouseover) on a image with dynamic height:
<div id="one-third">
<div class="over_menu">Text</div>
<div class="menu_bg"><img src="one.jpg" class="resp-img"></div>
</div>
CSS
.one-third { width: 33.3333%; }
.menu_bg img { width: 100%; height: auto; }
.menu_bg { position:relative; width: 100%; }
.over_menu { position: absolute; z-index:2; background-color:rgba(0,0,0,0.5); color: #FFFFFF; height: 100%; }
Unfortunately the height of "over_menu" is too large, it shows until the whole rest of the page. How else can I fix this?
Give position: relative; to the parent, so that its boundaries are within it:
.one-third { width: 33.3333%; position: relative; }
You should move the over_menu to inside menu_bg
<div id="one-third">
<div class="menu_bg">
<div class="over_menu">Text</div>
<img src="one.jpg" class="resp-img">
</div>
</div>
Of course you should change your :hover condition as well. It would be helpful if you could add a JSFiddle to your question.
Related
Beginner in CSS here.
Basically, what I am trying to do is to place check marks or X-es on top of a country map and I am trying to find the best way to do this.(open to learn JS for this)
So far, I have placed my map in a div and centered it, with HTML code <img src="check mark"> after the map image.
I will do this for every check mark i have to add, but is it there any better solution ?
.container {
margin-left: 10%;
width: 75%;
height: 80%;
display: flex;
justify-content: center;
}
.child {
position: relative;
margin: 0 auto;
}
.check {
position: absolute;
top: 300px;
right: 500px;
}
<div class="container">
<div class="child">
<img src="Map_image.png">
</div>
</div>
This is an example of what i want to achieve:
https://imgur.com/a/mu5WpuN
Short answer is create a wrapper div with position: relative and place the map and the Xes inside it. Then make map fit with the wrapper (i.e. 100% width and height or whatever) then make all Xes position: absolute and position them accordingly using top: left: right: bottom: properties
Here's a working sample. Try to run it.
.wrapper {
position: relative;
width: 100%;
}
img.map {
width: 100%;
}
img.marker {
position: absolute;
width: 20px;
}
.marker.x1 {
top: 20px;
left: 50px;
}
.marker.x2 {
top: 50px;
left: 190px;
}
<div class="wrapper">
<img class="map" src="https://www.onlygfx.com/wp-content/uploads/2015/12/world-map-vector.png" alt="map">
<img class="marker x1" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
<img class="marker x2" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
</div>
I have pure CSS image slider which I want to have positioned (margin:auto) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100%) but wrapper or content divs can be exact size. Or maybe they don't need to either?
This is what I am after:
And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/
If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.
The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.
http://jsfiddle.net/1qxxnxbf/2/
Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?
Checkout this design
https://jsfiddle.net/jalayoza/zvy87dcv/9/
HTML code
<div class="content">content
<div class="wrapper">wrapper
<div class="slider">
<img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
<img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
<img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
</div>
<!-- text should go underneath the image -->
<div class="text">
<div class="text_left">
left text
</div>
<div class="text_right">
right text
</div>
</div>
</div>
</div>
CSS code
.content {
width: 500px;
background: #fff;
margin: auto;
}
.wrapper {
max-width: 400px;
position: relative;
background: purple;
margin: auto;
padding:10px;
}
.slider {
margin: auto;
left: 0;
right: 0;
max-width: 100%;
position: relative;
padding-bottom: 62.857%;
}
.slide {
max-width: 400px;
margin: auto;
position: absolute;
opacity: 0.5;
width: 100%;
}
.text {
max-width: 100%;
position: absolute;
background: transperant;
opacity: 0.9;
bottom:10px;
width: 95%;
}
.text_left {
max-width: 50%;
background: #fff;
float: left;
text-align: left;
padding:5px;
}
.text_right {
max-width: 50%;
background: #fff;
float: right;
text-align: right;
padding:5px;
}
Hope you will like this design
In my new site I have an image set to width 100% and then a some text underneath that. How to I change the position of the text based on the height of the image?
.pic {
position: absolute;
left: 0;
width: 100%;
}
.pic img {
position: absolute;
width: 100%;
}
.text {
position: relative;
margin-top: 10px;
}
<div class="pic">
<img src="#" />
</div>
<div class="text">
<h3>Some Important Message</h3>
</div>
As requested, here is the fiddle https://jsfiddle.net/sLx3n2vz/
Please try this:
Remove all you css and add only
.pic{
width:100%;
}
.pic img{
width:100%;
}
.text{
margin-top:10px;
}
DEMO
The way you are positioning your HTML element is wrong. Please correct it.
If you go to my Website that i am working on:
http://lastdeath.de/kaufmannmike/wallpaper.html
You can see 2 images (img) both inside 2 different div elements.
Something is weird there. The images have 5 bottom pixels, even if I
don't set it anyways. I've just put an img element in a class="content" and then in div id="breaker/boxer" , nothing really complicated.
But the code just don't want to work.
i can make a line code of an img, then there are no problems with these 5 pixels on the bottom. But i need to put the img in a div container.
Code:
body {
background-color: #fafafa;
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
padding-top: 80px;
}
img {
height: 100%;
width: 100%;
}
<div class="content">
<div max-height="480px" id="breaker">
<img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/breaker-wallpaper_long.jpg">
</div>
<div id="boxer">
<img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/boxer-wallpaper_long.jpg">
</div>
</div>
How to fix this?
just set your img to display:block
why? because default value of img is display:inline
so instead of this:
img {
height: 100%;
width: 100%;
}
you should have this:
img {
display:block;
height: 100%;
width: 100%;
}
Here is a working snippet based on your code taken from your site:
body {
background-color: #fafafa;
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
padding-top: 80px;
}
img {
display:block;
height: 100%;
width: 100%;
}
<div class="content">
<div max-height="480px" id="breaker">
<img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/breaker-wallpaper_long.jpg">
</div>
<div id="boxer">
<img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/boxer-wallpaper_long.jpg">
</div>
</div>
I'm working with absolute positioning within a relative div. The code is as such: http://jsfiddle.net/32mq5v6L/1/
HTML
<div id="container">
<div id="featured-posts">
<div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/star-wars-droid.jpg" /></div>
<div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/han-solo-1140x350.jpg" /></div>
</div>
<div id="other-content">
Other Content
</div>
</div>
CSS
#container { width: 100%; margin: 0 auto; background: #eee; }
#featured-posts { position: relative; width: 100%; height: auto;}
.slide { width: 100%; height: 20px; position: absolute; top: 0; }
#other-content { }
My problem is the other-content div appears underneath #featured-posts unless I apply a set height to that container, which I can't do since the goal is to make all of this responsive.
Where am I going wrong?
If you plan to have #other-content after positioned container, you will have to create new stacking context in order to move it above. One way to do it since it's not positioned is to set very little opacity:
#other-content {
z-index: 10;
opacity: .99;
}
Demo: http://jsfiddle.net/32mq5v6L/1/