So I have an image that needs a hover effect;
HTML
<div class="data">
<img src="http://scontent-a-dfw.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10809512_341410899374744_4010362_n.jpg"/>
<div class="overlay"></div>
</div>
CSS
.data {
width: 100px;
margin: auto;
padding: 5px;
height: auto;
}
img {
width: 100%;
}
.overlay {
width: 100%;
height: ___?;
background-color: blue;
}
As you can see, the height of .data is the same as the image. How can I make .overlay the same height of .data?
Since the element is an overlay (as the name implies), i'd suggest relatively positioning the parent and then absolutely positioning the overlay relative to it:
Example Here
.data {
width: 95%;
margin: auto;
position: relative;
}
.data .overlay {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
.data:hover .overlay {
background: rgba(0, 0, 0, .5);
}
Related
I'd like to have an image with a div that covers the image exactly. I can get the div to overlay the image by using position: relative in the parent and position: absolute for the div, but background-color fills out the padding in the parent so they aren't overlayed properly.
Here's a snippet that demonstrates the problem.
.parent {
position: relative;
padding: 10px;
width: 40%;
}
.image {
width: 100%;
height: 100%;
border-radius: 13px;
}
.overlay {
position: absolute;
background-color: red;
width: 100%;
height: 100%;
border-radius: 13px;
left: 0;
top: 0;
opacity: 0.2;
}
<div class="parent">
<img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
<div class="overlay"></div>
</div>
I'm able to get it pretty close with some calc()'s to subtract the padding. This almost works, but the div fills out a little too much at the bottom. I'd like to not have a bunch of hardcoded values for padding anyway, so I wouldn't really like this solution even if it did work entirely.
Here's a snippet that shows the calc() approach.
.parent {
position: relative;
padding: 10px;
width: 40%;
}
.image {
width: 100%;
height: 100%;
border-radius: 13px;
}
.overlay {
position: absolute;
background-color: red;
width: calc(100% - 2 * 10px);
height: calc(100% - 2 * 10px);
border-radius: 13px;
left: 10px;
top: 10px;
opacity: 0.2;
}
<div class="parent">
<img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
<div class="overlay"></div>
</div>
This snippet does things a slightly different way, putting the img inside the overlay div and putting the actual green, lower opacity overlay as the overlay div's after pseudo element.
This way you don't have to build in any knowledge of the parent's padding.
.parent {
position: relative;
padding: 10px;
width: 40%;
background: red;
height: fit-content;
}
.image {
width: 100%;
border-radius: 13px;
top: 0;
left: 0;
}
.overlay {
position: relative;
padding: 0;
width: fit-content;
height: fit-content;
}
.overlay::after {
content: '';
position: absolute;
background-color: green;
width: 100%;
height: 100%;
border-radius: 13px;
left: 0;
top: 0;
opacity: 0.2;
padding: 0px;
}
<div class="parent">
<div class="overlay"> <img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156"></div>
</div>
When using HTML5, browser adds some padding to the bottom of the img tag. This can be avoided by making the image a block element. So just adding display: block to class .image and then it good.
And btw, to define witdh/height of an absolute element, beside calc() you can also define 4 values top, right, bottom, left of it.
:root {
--custom-padding: 10px;
}
.parent {
position: relative;
padding: var(--custom-padding);
width: 40%;
}
.image {
width: 100%;
height: 100%;
border-radius: 13px;
display: block;
}
.overlay {
position: absolute;
background-color: red;
border-radius: 13px;
bottom: var(--custom-padding);
right: var(--custom-padding);
left: var(--custom-padding);
top: var(--custom-padding);
opacity: 0.2;
}
<div class="parent">
<img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
<div class="overlay"></div>
</div>
I have problem with how to make children size following its parent. The case below.
HTML
<div class="video">
<div class="spot">
<img src="..." alt="">
<button>x</button>
</div>
</div>
CSS
.video {
width: 600px;
height: 500px;
background: #000;
position: relative;
}
.spot {
position: absolute;
max-height: 30px;
top: 0;
left: 0;
display: table;
margin: 0;
max-width: 100%;
/* width: 16%; only height can affect image on content*/
}
.spot img {
width: 100%;
height: 100%;
}
.spot button {
position: absolute;
top: 0;
left: 100%;
margin-left: -24px;
}
What I want to do is to make the image follow the spot height. Because if I set width (whatever size), the image will follow the spot width. Anyone know how to do this?
I also create jsfiddle https://jsfiddle.net/isatrio/yosfep6r/14/.
Your image is already following your .spot height. Check the border on spot. Or do you mean overflow? Or do you want your .spot to follow your .video?
console.log(".spot height: " + $(".spot").innerHeight());
console.log("img height: " + $(".spot img").height());
.video {
width: 600px;
height: 500px;
background: #000;
position: relative;
}
.spot {
border: red 2px solid;
position: absolute;
height: 40%;
/*width: 20%;*/
top: 0;
left: 0;
margin: 0;
padding: 0;
max-width: 100%;
overflow: hidden;
}
.spot img {
/*width: 150%;*/
height: 100%;
}
.spot button {
position: absolute;
top: 0;
left: 100%;
margin-left: -24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
<div class="spot">
<img src="https://creativeblossoming.files.wordpress.com/2013/10/navy-living-room.jpg" alt="">
<button>x</button>
</div>
</div>
You have set max-width instead of width. max-width will not set the width to the given value, it will just prevent the width from surpassing the given value.
.spot {
position: absolute;
height: 30px;
top: 0;
left: 0;
display: table;
margin: 0;
width: 100%;
}
Is there anyway I can position my div content stuff to go below image.I don't want to give padding to wrap class as no one know how big the image would be so I need a solution where text goes below to image as mentioned in html structure.
.parent {
width: 500px;
background-color: red;
margin: 0 auto;
position: static;
}
.wrap {}
.child {
background-color: yellow;
position: absolute;
left: 0;
right: 0;
height: 100px;
top: 30px
}
div {
height: 400px;
}
body {
background-color: blue;
}
<div class="parent">
<div class="child"><img src="https://images.mapsofworld.com/around-the-world/Chinese-economy-faces-tough-times.jpg" /></div>
<div class="wrap">stuff</div>
</div>
Position wrap inside child
html, body { padding: 0; margin:0; }
.parent {
width: 500px;
background-color: red;
margin: 0 auto;
position: static;
}
.wrap {}
.child {
background-color: yellow;
position: absolute;
left: 0;
right: 0;
height: 100px;
top: 30px
}
div {
height: 400px;
}
body {
background-color: blue;
}
<div class="parent">
<div class="child"><img src="https://images.mapsofworld.com/around-the-world/Chinese-economy-faces-tough-times.jpg" />
<div class="wrap">stuff</div>
</div>
</div>
You could use Transform: Translate() to move it under, inside the parent <div>. I did this myself with a table and input fields inside a <div>
I can't seem to figure out why my project-img-text-container is falling outside of its parent div project-image-container and project-img-main. I added in project-image-container to combat this issue, but it did nothing and I am drawing a blank. I have both containers set to relative, so not sure why project-img-text-container is falling out when it is set to absolute.
Anyone see why?
#project-img-main {
position: relative;
margin: 0;
width: 100%;
height: auto;
}
#project-image-container {
width: 100%;
height: 100%;
position: relative;
}
#project-img-window {
max-height: 700px;
/*background: rgba(0,0,0,0);*/
width: 100%;
}
#project-img-text-container {
background: rgba(0,0,0,.7);
position: absolute;
width: 33%;
height: 100%;
left: 60%;
z-index: 99;
}
#project-img-text {
color: #FFF;
font-size: 2em;
}
<div id="project-img-main">
<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
<div id="project-img-text-container">
<div id="project-img-text">Test</div>
</div>
</div>
</div>
#project-img-text-container {
top:0;
}
When setting something as position absolute, you need to specify it's position within the document or containing element.
If you are not going to use a defined height, position: relative alone can not hold the element within. Since project-img-text-container position property value is absolute, you need to add top:0 to its block of CSS.
#project-img-main {
position: relative;
margin: 0;
width: 100%;
height: auto;
}
#project-image-container {
width: 100%;
height: 100%;
position: relative;
}
#project-img-window {
max-height: 700px;
/*background: rgba(0,0,0,0);*/
width: 100%;
}
#project-img-text-container {
background: rgba(0,0,0,.7);
position: absolute;
width: 33%;
height: 100%;
top: 0; /* This has to be 0 to bring it up to the top */
left: 60%;
z-index: 99;
}
#project-img-text {
color: #FFF;
font-size: 2em;
}
<div id="project-img-main">
<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
<div id="project-img-text-container">
<div id="project-img-text">Test</div>
</div>
</div>
</div>
Try adding
img{
position: absolute;
}
Working fiddle: https://jsfiddle.net/rittamdebnath/hwj28zm3/
I have a div that is 50% the width of the screen and 100% height.
I want to have an image placed at the bottom of the div that will adjust with the width.
To set the position I use position: absolute; but this removed the auto width:
code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
}
.bottomImage {
width: auto !important;
width: 100%;
max-width: 100%;
position: absolute;
bottom: 0;
width: auto;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="events_bottom.png" />
</div>
</div>
Is there any way to have an image positioned absolute and adjust to container width?
Adding position: relative to #aaaaa allows the image width and offsets to be computed with respect to the #aaaaa block's width and position.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
position: relative;
}
.bottomImage {
width: 100%;
position: absolute;
bottom: 0px;
left: 0;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="http://placehold.it/300x50" />
</div>
</div>
You could try this:
.aaaaa {
position: relative;
}
.bottomImage {
position: absolute;
left: 0;
right: 0;
}
https://jsfiddle.net/1oxy7odv/
HTML
<div>
<img />
</div>
CSS
div {
display: block;
position: relative;
width: 500px;
height: 500px;
background: black;
margin: 50px auto;}
img {
display: block;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: red;
height: 25px;}
you could use another positioning for your bottomImage to size with its parent container:
.bottomImage {
position: absolute;
top: 0; //or whatever position from top
left: 0;
right: 0; //important !!! this way its always on the rightest(?) position of the parent)
bottom: 0;
}
You can also try this:
.bottomImage {
width: inherit; /*inherits width from div.aaaaa*/
max-width: 100%;
position:absolute;
bottom:0;
}