CSS auto height and width suggestion - html

I have an image and div. I want to show the overlay div when hovering on the main image. Basically, the overlay div will be hidden and it will be shown only on hovering. The div should be same height and width like the image <div class="image">.
HTML:
<div class="image">
<figure><img src="one.jpg"></figure>
</div>
<div class="overlay">
<p class="description">
Some description goes here
</p>
</div>

If I managed to understand your question, you want to make an element appear over another one and to cover it fully. Here's how I would do it. Put the overlay inside a div with the image to force them to have the same size and make the overlay visible when the parent is hovered.
HTML
<div class="hoverable fillme" id="example">
<figure>
<img src="one.jpg" alt="one" />
</figure>
<div class="overlay">Some description goes here</div>
</div>
CSS
#example {
width: 200px;
height: 200px;
}
.fillme {
position: absolute;
}
.fillme>* {
position: absolute;
top: 0px;
left: 0px;
}
.fillme *{
width: 100%;
height: 100%;
margin: 0px;
padding; 0px;
}
.overlay {
visibility: hidden;
background-color: #5555FF;
z-index: 100;
}
.hoverable:hover .overlay{
visibility: visible;
}
http://jsfiddle.net/do8byofd/1
If you want to do it with the exact HTML structure you have, you can't. There's no way to set the overlay to have the size of the element before it without some JavaScript.

Related

DIsplay: flex takes image height but overflows when text is added

My display: flex container takes my images height but when I add text it overflows the image. Basically the inspector takes the images height but forgets about the added text.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.book-right-side {
display: flex;
gap: 1rem;
width: 100%;
}
.attraction-card {
width: 100%;
/* height: 100%; */
}
.book-right-side img {
border-radius: 12px;
height: 100%;
width: 100%;
}
<div class="book-right-side">
<div class="attraction-card">
<h4>Beijing City</h4>
<p>Teeest</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Beijing_montage.png" alt="Beijing City" />
</div>
<div class="attraction-card">
<h4>Zhangjiajie Forest</h4>
<p>Teeest</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Badaling_China_Great-Wall-of-China-04.jpg" alt="Zhangjiajie Forest" />
</div>
<div class="attraction-card">
<h4>Great Wall of China</h4>
<p>Teeest</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Badaling_China_Great-Wall-of-China-04.jpg" alt="Great Wall of China" />
</div>
</div>
Error:
and the fiddle: https://jsfiddle.net/yqbcmvox/3/
I think you should take the h4 and p tag in a div, then give that div a class, and make it an absolute, and make the attraction card relative to that absolute, for example:
.text-box {
position: absolute;
top: 0;
left: 0;
}
.attraction-card{
width: 100%;
/* height: 100%; */
position: relative;
}
I think this will fix your problem
.book-right-side {
display: flex;
gap: 1rem;
width: 100%;
overflow: hidden;
}
Surround the <img> tag with a <div> tag.
This will make sure that the image doesn't overload the size of the parent flex div.
Example:
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Badaling_China_Great-Wall-of-China-04.jpg" alt="Beijing City" />
</div>
Do this for all 3 instances of the <img> tag.
Add a div tag to wrap the image and set the height to 100% {height: 100%}.
I've tested it and it works. I resized the images of the same height, and width and hosted them on a free hosting image online.
<div> <img src="https://i.ibb.co/F4qbx7V/great-wall-21.jpg"> </div>
<div> <img src="https://i.ibb.co/vZTJ9WN/Beijing-montage1.jpg"> </div>
Also, add a height: 100% on your .attraction-card. Without adding the height the image looks stretched (if you notice).
Codepen

Display image over another image, with cutting edges on resize (responsive)

I want to display one image over another. It have to be responsive, with cutting image's edges if i resize. (see the pictures. i can't directly embedded images yet, without 10 reputation). How can i do that?
Here's the code:
<div class="content">
<div class="content-item_1">
<img class="img1" src="photo/image1.png" />
text1. text text
</div>
<div class="content-item_2">
<img class="img2" src="photo/image1.png" />
text2. text text
</div>
</div>
Something like this https://jsfiddle.net/5woswyxc/2/
but image 2 have to be slighty over image 1, if it resize.
and when size is reduced - text 1 must move on the top on image 2.
(image1 is moved to bottom)
resized layout
try this:
<body>
<div class="content">
<div class="parent">
<img class="image1" src="http://openclipart.org/image/300px/svg_to_png/4112/Clue_Simple_Clouds.png" />
<img class="image2" src="http://openclipart.org/image/300px/svg_to_png/4112/Clue_Simple_Clouds.png" />
</div>
</div>
<style>
.parent {
position: relative;
top: 0;
left: 0;
background-color: blue;
width: 450px;
height: 320px;
overflow: hidden;
}
.image1 {
position: relative;
top: 0;
left: 0;
}
.image2 {
position: absolute;
top: 30px;
left: 70px;
}
</style>
</body>

<img> height equals to its width inside a div

First of all, I'm not really good with CSS but I'm trying to make the <img> height equals the width of it using only CSS.
I'm also using bootstrap as shown below, so the width of each column is responsive.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
.album .album_photo .photo_link img {
width: 100%;
}
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
</div>
This is how it looks like right now:
and this is what I'm trying to achieve:
Take a look at this pen, you'll know how to do that using padding-bottom trick:
Code pen
.album_photo {
position: relative;
padding-bottom: 100%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Consider using image as background in conjunction with background-size: cover.
I like this method. It makes the content of the column (in this case .album_photo) position: relative, sets the inner wrapper of the element ('.photo_link img') position: absolute; with a height of 100%. To keep the shape of the column, you use a pseudo-element that has a padding-top: 100%. The reason why this works is because percentage based padding is always relative to the width of the element. Thus with a padding of 100%, it will always be just as tall as it is wide. You can use the same method to create ratio based container sizes too (e.g. 3:1 ratio for slideshows having absolutely positioned slides). It's a neat trick.
#import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);
.album_photo {
position: relative;
overflow: hidden;
}
.photo_link img {
position: absolute;
top: 0;
left: 0;
}
.album_photo:after {
content: '';
display:inline-block;
vertical-align: top;
width: 100%;
height: 0;
padding-top: 100%;
}
<div class="container">
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
</div>
</div>
try this
img{
aspect-ratio:1;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
You can scale the images in any way, by simply applying a width & height. For example, You can say
.full-width-height { width: 100%; height: 100%; }
You can also use min-width, max-width, min-height and max-height.
However, you will run into aspect ratio issues with this.
You have two options that will keep aspect ratios in check using CSS and
.auto-width { width: auto; height: xxx; }
.auto-height { width: xxx; height: auto; }
Bootstrap provides a responsive class you can use as well. The class is img-responsive which you can read about here. This class is often used with center-block helper class.
you want your "album_photo" class to have a width and height of 100%, because those will fill the space in the parent element which has a class of "col-xs-3"
CSS:
.album_photo {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
set margin and padding to 0 and you will see that the img fits nicely in the parent element.

Scrollable text over image HTML/CSS

Currently I can not find a solution that is responsive and scrollable to put text on an image. I need the height to be flexible and the width at 100%. I tried to use position:relative; and css background images with no luck. When I use position: relative; there is a space at the top of the image and the only way to delete it is negative margins which I think is not sustainable it there are multiple posts. css backgrounds does not show the full image unless you set dimensions and when is responsive you cant set dimensions. I dont think I can use position absolute because it would not scroll. so I dont not know what to use.
I have this HTML code here:
<div class="post">
<span><a>Posted By Adam</a></span>
<img width="100%" src="uimg/adam-levine-600.jpg">
</div>
Use position: absolute; and add a spacer for the nav:
http://jsfiddle.net/ryanpcmcquen/p3bes5xq/
.nav {
height: 100px;
width: 100%;
position: fixed;
background-color: #21A7F0;
text-align: center;
z-index: 10;
color: #ffffff;
}
.spacer {
height: 105px;
}
.post span {
position: absolute;
color: #ffffff;
text-shadow: 1px 1px 2px #000000;
}
.post img {
width: 100%;
}
<div class="nav">nav bar</div>
<div class="spacer"></div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/450" />
</div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/260" />
</div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/194" />
</div>

How to bottom align two elements in a DIV element?

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>