I am having the following Issue:
I got a Website with a quite large DIV element, in which there is a img (sullsize).
As on the main index site, I want to have the "Site Title" called Palette within the DIV, not on the outside. Whenevery I try to do it with the Flex CSS, the Image will not go to the end (fill the element).
"My Team Site"
So my current issue is, I can't get the Palette Text into the item, and also I will be listing Photos and Jobdescriptions for the individuals, each has it's own flexbox, so it will behave right.
As said, I can't get them to be within the box.
The easyest way is if you look at my (Sample) Website:
LINK (it should look like on the main site. Maybee even with
Flex, instead of old-fashioned way)
Dashed Orange: Text Box
Dashed Red: Future Team Div (1 per Person)
This is the basic HTML and a part (ONLY A PART!) of the CSS, look at the Rest on the Website:
.content_item .content_title {
position: relative;
overflow: visible;
display: inline-block;
height: 100%;
width: 45%;
float: right;
flex-grow: 1;
flex-shrink: 1;
}
.content_item h2 {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding-left: 20px;
width: 100px;
flex-grow: 1;
flex-shrink: 1;
color: rgba(255, 255, 255, .9);
white-space: nowrap;
letter-spacing: 1px;
font-size: 5em;
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
<body>
<div class="site_palette">
<div class="header_div">
<h1 class="header_title">Schwarz & Torf Maler AG</h1>
<h3 class="header_subtitle">Wir Malen wo andere nur zuschauen</h3>
</div>
<div class="flex_container">
<a href="index.html">
<div class="content_item shadowbox_red">
<img src="http://maler1.calmarsolutions.ch/images/center_3.jpg" />
<div class="team_section">
<div class="team_part">
<img src="">
</div>
</div>
<div class="content_title">
<h2>Palette</h2>
</div>
</div>
</a>
</div>
</div>
</body>
The flex container is .content_item.
This container has three children (flex items):
img
div.team_section
div.content_title
Since these are three in-flow flex items, they respect each other's space and don't overlap.
The text you want to layer over the image is in an absolutely-positioned h2, which is a child of relatively-positioned .content-title.
What you need to do is add position: relative to the primary container, then apply position: absolute the non-image flex items.
Add this to your code:
.site_palette .content_item {
position: relative;
}
.team_section {
position: absolute;
}
/* adjustment below may be unnecessary */
.content_item .content_title {
/* position: relative; */
position: absolute;
right: 0;
}
.site_palette .content_item {
max-width: 70vw;
position: absolute;
}
.team_section {
display: flex;
position: absolute;
}
Locate the following code in your css:
.team_section {
display: flex;
}
And change it to:
.team_section {
display: none;
}
Related
This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
I'm trying to make a div with some information about an image appear when I hover over the image, my code doesn't seem to work.
HTML:
< div class="batmobile-info">This is Batman's batmobile, he uses it to chase his enemies or to flee from the police.< /div>
< img class="batmobile" src="images/batmobile.png" alt="batmobile" >
CSS:
.batmobile{
position:relative;
width:500px;
height:200px;
top:350px;
left:200px;
}
.batmobile-info{
visibility:hidden;
}
.batmobile:hover .batmobile-info{
background-color:white;
text-align:center;
width:290px;
height:40px;
position:absolute;
top:500px;
left:700px;
visibility: visible;
}
If you reverse the order of your elements, so the img comes before the div to give you:
<img class="batmobile" src="images/batmobile.png" alt="batmobile">
<div class="batmobile-info">This is Batman's batmobile, he uses it to chase his enemies or to flee from the police.</div>
Then you could use the following CSS to show the div on hover:
.batmobile:hover + .batmobile-info {
visibility: visible;
}
The + is an adjacent sibling selector - a super useful selector!
One way to make this work is to use container where you'll put your img and div with information.
I used opacity instead of visibility because opactity is the property you can use in transitions.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
}
/* contiainer to center my content, not relevant to question*/
.main-container {
margin-top: 2rem;
height: calc(100vh - 2rem);
display: flex;
align-items: center;
justify-content: space-around;
}
/* image and info container */
.img-container {
display: inline-block;
position: relative;
border: 2px solid #333;
}
/* style for div with information */
.img-info {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: #eee;
transition: opacity .3s ease-in-out;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
padding: .5rem;
}
/* information positioning styles */
.img-info-overlay {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-info-above {
left: -2px;
top: -2rem;
height: 2rem;
width: calc(100% + 4px);
}
/* this part show information on hover */
.img-container:hover .img-info {
opacity: 1;
}
<div class="main-container">
<div class="img-container">
<img src="https://dummyimage.com/250x100/fff/aaa" alt="Filler image">
<div class="img-info img-info-overlay">Some info about this image</div>
</div>
<div class="img-container">
<img src="https://dummyimage.com/250x100/fff/aaa" alt="Filler image">
<div class="img-info img-info-above">Some info about this image</div>
</div>
</div>
The problem is in both - the HTML and CSS, you need to put the image and text in one parent block and start styling from it. I'd avoid absolute positioning and also try using opacity CSS property in case you will need to add some extra transition effects to your text block .batmobile:hover state. Check out the code and run the snippet:
body {background:#ccc}
.batmobile {
position: relative;
width: 500px;
height: 200px
}
.batmobile div p {
visibility: hidden;
background-color: white;
width: 300px;
height: 40px;
margin: 0px auto; /* Think you wanted to center the block as width is less than parent */
text-align: center /*In case you need to center text only */
}
.batmobile:hover div p {
visibility: visible;
}
.batmobile img {width: 100%}
<div class="batmobile">
<div>
<p>An excelent drone - Ryze Tello with price under $100</p>
</div>
<img src="https://bestdroneforkids.com/wp-content/uploads/2019/09/ryze-tello-drone-forkids.jpg" alt="Ryze tello drone in the air">
</div>
I have a parent div that contains two children, side by side. The first child is an image that must be height 100% and 58% width, margin auto and overflow hidden. The second child contains text, and the length of the text determines the height of the parent. This is a template for several pages, with different length of text, and therefore different parent height. Is it possible to do what I'm trying to do without using JS? Thanks for your input! Code below.
HTML:
<div id="product-summary">
<div class="product-image-container">
<img />
</div>
<div id="product-details">
<h3 class="product-title"></h3>
<div class="product-description"></div>
</div>
</div>
CSS:
.product-image-container {
position: absolute;
top: 0;
left: 0;
width: 58%;
height: 100%;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 50%;
margin: auto;
transform: translateX(-50%);
min-width: 100%;
height: 100%;
}
}
#product-details {
float: right;
border: solid thin #777;
height: ~"calc(100% - 2px)";
width: 41%;
text-align: center;
}
The problem is your #product-details is floated, which creates a new BFM (block formatting context), and the parent gets collapsed.
I suggest you read more about BFMs here: http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
There are several ways to fix this:
You could clear the parent, a way to do that is by adding overflow: hidden; to the #product-summary element.
You could remove the float: right from #product-details, and use flexbox to align it instead.
I don't know any preprocessor wizardry, but using inline-block works good, as well as keeping positioned absolute elements wrapped in a relative parent for control. It wasn't mentioned how the image is displayed, so I assume aspect ratio unchanged and no cropping.
SNIPPET
.product-image-container {
display: inline-block;
position: relative;
top: 0;
left: 0;
right: 0;
width: 58%;
height: 100vh;
overflow: hidden;
}
img {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
#product-details {
float: right;
border: 1px solid #777;
height: 100%;
width: 41%;
text-align: center;
}
a {
margin-left: 50%;
}
<div id="product-summary">
<div class="product-image-container">
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
</div>
<div id="product-details">
<h3 class="product-title">Lena Söderberg</h3>
<div class="product-description">
<blockquote>Lenna or Lena is the name given to a standard test image widely used in the field of image processing since 1973. It is a picture of Lena Söderberg, shot by photographer Dwight Hooker, cropped from the centerfold of the November 1972 issue of Playboy
magazine.
</blockquote>
<a href='https://en.wikipedia.org/wiki/Lenna'>Wikipedia</a>
</div>
</div>
</div>
I am trying to center-align text (that may or may not span several lines) within a <div> that has position: absolute applied to it.
Please consider the following markup:
<div class="item">
<img src="test.jpg" />
<div class="overlay">
Some long content
</div>
</div>
The CSS applied is as follows (please note that this is the LESS version):
.item {
position: relative;
img {
position: relative;
z-index: 1;
}
.overlay {
position: absolute;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.5);
text-align: center;
a {
color: #fff;
}
}
}
As well as being center-aligned horizontally, I'd like for the text within .overlay to be vertically aligned to the middle. I've tried adding the following:
.item {
display: table;
.overlay {
display: table-cell;
vertical-align: middle;
}
}
I've also tried inline-block but nothing helps, since the element is absolutely positioned. I cannot use the usual line-height trick here, since the text may span several lines, and specifying a large line height will break the layout.
Does anyone know of a (relatively) cross-browser method to solve this issue? It needs to work in IE9+, FF and Chrome. If possible, I'd like to avoid adding any additional markup or 'divitis'.
I've put together a jsFiddle to demonstrate my issue (you'll also see the usual tricks work fine when the position != absolute):
jsFiddle Demo
Use a pseudo-element like :before and inline-block this way:
.item .overlay:before {
content:" ";
display:inline-block;
vertical-align:middle;
height:100%;
}
.item .overlay a {
display:inline-block;
vertical-align:middle;
color: #fff;
}
Check this Demo Fiddle
You may need to handle the space between those inline-block items HERE I use margin-right
Just make the absolute positioned element a "positioning" container, and put the actual element containers inside, like so - http://jsfiddle.net/Ggbtt/4/
HTML:
<div class="item">
<img src="http://placehold.it/350x150.jpg" />
<div class="overlay">
<div class="inner-container">
<div class="inner-cell">
Some long content
</div>
</div>
</div>
</div>
CSS:
.item {
position: relative;
width: 350px;
display: table;
}
.item .overlay {
position: absolute;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.5);
text-align: center;
width: 100%;
height:100%;
vertical-align: middle;
}
.inner-container{
width: 100%;
height: 100%;
display:table;
}
.inner-cell {
display:table-cell;
vertical-align: middle;
text-align: center;
}
.item .overlay a {
color: #fff;
}
If using absolute position, I find this solution to work every time
.item .overlay{
top:50%;
-webkit-transform:translateY(-50%);
}
I tried to display vertical text exactly in center of div (navigation button) which is nested in floating element, I set size,magin:auto, vertical-align but text is on the edge against center.
Is there any other way to put the text where it should be without using absolute positioning?
<nav>
<div class="button"><p class="rotare">1st button</p></div>
<div class="button">1</div>
<div class="button">1</div>
<div class="button">1</div>
</nav>
nav {
width: 50px;
height: 600px;
background-color: red;
margin-left: 0px;
top:0px;
position: absolute;
display: inline-block;
float:left;
}
.button {
width: 50px;
height: 150px;
background-color: pink;
}
.rotare {
position: relative;
text-align: center;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
background-color: white;
margin:auto;
vertical-align: middle;
width: 100px;
height: 20px;
}
You can do this with absolute positioning, but without having to manually push the content into its place by simply adding these rules to your existing css:
.button {
position: relative;
}
.rotare {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Here's a JS Fiddle of it in action: http://jsfiddle.net/grammar/NgrWg/
And here's an article explaining this method of vertical centering in more detail: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
EDIT - secondary approach without absolute positioning
Another approach is to use table and table-cell as the display property for the wrapper and text respectively. I've updated the fiddle to show that method as well: http://jsfiddle.net/grammar/NgrWg/1/.
Here's another article that explains this table-cell trick, and also outlines a third technique for centering things vertically: http://css-tricks.com/centering-in-the-unknown/
I found a nice tutorial for making my images enlarge (like a zoom effect) on hover. The main difference between my needs and a tutorial is that I want my all images contained in a single box like container. So when I implemented the tutorial I realize that part of the enlarged image gets cut off when you hover. The effect is constrained to the container. I would like a way for the zoom to go wherever it needs to go on the page. (So you can see the whole zoomed image)
Here is my implementation of the tutorial: http://mulnix.contestari.com/wp/example225/1.php
JSFiddle: http://jsfiddle.net/dsRAH/
Original Code
Remove the overflow: hidden and all other overflows,
than for your images containers DIV remove float:left; and add display:inline-block;
* {
margin: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
background: #000;
color: #fff;
z-index: 0;
}
.photos {
position: relative;
display: flex;
flex-flow: row wrap;
}
.photo {
box-shadow: 0 0 0 2px #444;
margin: 5px;
position: relative;
max-height: 200px;
transform: translateZ(0);
transition: transform 0.5s;
}
.photo:hover {
z-index: 1;
transform: translateZ(0) scale(1.6);
}
.photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-legend {
position: absolute;
bottom: 0;
width: 100%;
padding: 1em;
background: rgba(0,0,0,0.3);
}
<div class="wrapper">
<div class="photos">
<div class="photo">
<img src="https://placehold.it/200x150/0bf" />
<div class="photo-legend">TEST DESCRIPTION</div>
</div>
<div class="photo">
<img src="https://placehold.it/200x200/f0b" />
</div>
<div class="photo">
<img src="https://placehold.it/200x150/bf0" />
</div>
</div>
</div>
It's not perfect but it's a start. I changed the overflow:hidden; in the wrapper to visible. I also put your code into jsfiddle so people can tinker with it.
http://jsfiddle.net/m8FXH/
You can try to use z-index. An element with greater z-index is always in front of an element with a lower z-index. If you main container is not overflow:hidden than you can try this out.
here is an example where you can see how it works. Hope that is helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I would suggest giving your divs one of the following classes:
colleft for the ones that are at left column
colright for the ones that are at right column
rowtop for the ones at the top row
rowbottom for the ones at the bottom row
And then assign them the following properties
.colleft {
transform-origin-x: 0%;
}
....
transform-origin-x: 100%;
transform-origin-y: 0%;
transform-origin-y: 100%;
(respectively)
That will make the zoom go in the desired direction.
evan stoddard modified fiddle