This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
I have something like that
<div id="hover_parent">
<h3>Something</h3>
<h3>Something else</h3>
</div>
that looks something like that
#hover_parent{
background-image:url(animage.jpg) no-repeat;
background-position:bottom left;
background-size:cover;
width:100%;
}
h3{
margin-top:20px;
width:50%;
text-align:center;
transition:0.2s;
}
h3:hover{
margin-top:0px;
}
So what I want to achieve, is that the child-elements move a bit up when hovering them. What they do of course by using a smaller margin-top-amount when hovering.
But my problem then is that the whole parent moves (especially the background-image) up too when hovering a child-element.
How could I prevent that?
None of my child-elements do have a real absolute height, so I didn't come along with min-height and calc but that could do it - nor?
try this. h3 required display:inline-block;
#hover_parent{
background:url(https://dummyimage.com/600x400/000/fff) no-repeat;
background-position:bottom left;
background-size:cover;
width:100%;
color:#fff;
height:200px;
}
h3{
margin-top:20px;
width:50%;
text-align:center;
transition:0.2s;
display:inline-block;
}
h3:hover{
margin-top:0px;
}
<div id="hover_parent">
<h3>Something</h3>
<h3>Something else</h3>
</div>
Related
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 8 years ago.
I'm trying to make a kind of menu where consists of many DVD covers. When the cursor is positioned over each cover it will show the complete title name in a single line (not wrapped inside the cover container). How can I align the title right in the center of each cover.
Note: I would like to place the title a bit above the cover, not completely over it.
Here is the HTML example:
<div id="cover"><span>Here is the title in a single line!</span></div>
Here is the CSS:
#cover{
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#cover span{
position:absolute;
background-color:#0f0;
display:none;
}
#cover:hover span{
display:block;
}
JSFIDDLE: example
When the cursor is positioned over each cover it will show the
complete title name in a single line (not wrapped inside the cover
container). How can I align the title right in the center of each
cover.
I think this will take care of it.
Codepen.io Demo
CSS
.cover{
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
position: relative;
}
.cover span{
position:absolute;
background-color:#0f0;
display:none;
color:white;
}
.cover:hover span{
display:block;
position: absolute;
left:50%;
top:10%; /* adjust to suit */
width:auto;
white-space: nowrap;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
I would like to place the title a bit above the cover, not completely
over it.
I'm not sure what this means but the vertical positon can be adjusted by means of the top value.
"Piggybacking" on #Paulie_D's answer, I would include the element's properties in the 'normal' state rather than on the :hover state. Two benefits of this:
The element's properties don't need to be applied on every :hover action, hence optimizing elements' repaint a bit.
Just in case you want to show that content on the 'normal' state, the element will already have all the styles applied to it.
Here's what I mean:
.cover {
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
position: relative;
}
.cover span {
position:absolute;
background-color:#f00;
white-space: nowrap;
width:auto;
transform:translateX(-50%);
position: absolute;
left:50%;
top:10%; /* adjust to suit */
display: none;
}
.cover:hover span{
display:block;
}
Truth be told though:
Using :hover to display content is a content strategy and user experience bad practice: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/
Not only that but the content cannot be seen in touch screen devices, which renders this approach completely unusable.
Good luck.
This question already has answers here:
Position: absolute and parent height?
(8 answers)
Closed 8 years ago.
I have an image with absolute position image inside div tag. What i want to resize the div tag according to image if i resize the browser. My code are here:-
CSS
#parent{
width:225px;
height:auto;
position:relative;
border:1px solid #000;
}
img{
position:absolute;
}
HTML
<div id="parent">
<img src="images/photo1.jpg" />
</div>
Actually div tag border doesn't containing an image which is absolute positioned.
Please help.
Your question is not well worded. But maybe you need something like this?:
#parent{
width:100%;
max-width:250px;
height:auto;
position:relative;
border:1px solid #000;
}
img{
max-width:100%;
}
are you sure you need it absolute?
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 8 years ago.
Tried everything, with ul's... div's... but it doesn't appear how it should do.
The main div has margin 0 auto. The main div is 1030px width.
I bet it's a stupid thing...
Demo Fiddle
HTML
<div><span>Things to Know</span></div>
CSS:
div{
text-align:center;
}
div:after{
position:relative;
display:block;
border-top:1px solid grey;
top:-10px;
height:1px;
content:'';
}
div span{
background:white;
position:relative;
z-index:1;
}
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 9 years ago.
I was wondering what would be the best way to vertically center a div inside another div. The only constraint I have is that .anim needs to remain relative! I lsited the current code I have now down below. Thanks guys!
HTML:
<div class="anim">
<div class="spacer">
<p>CONTENT</p>
<p>more content</p>
</div>
</div>
CSS:
.anim {
position:relative;
width:75%;
margin:auto;
height:50%;
}
.spacer{
position:absolute;
height:300px;
top:0;
bottom:0;
}
.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}
would have it vertically aligned
An easy way to do this is to give your .anim div a fixed height of, let's say, 500px.
Then you can just add a margin-top :
.anim {
margin-top: 100px; // (500 - 300) / 2 = 100
}
demo
according to w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
so the code is really simple
.anim {
display: table-cell;
vertical-align: middle;
height: 200px;
}
here is the demo http://jsfiddle.net/AbTxS/
From your question it looks like you want something like this... div.spacer is vertically centered and div.anim remains relative.
The div.spacer top margin must be negative half of the .spacer height.
This solution only works with a fixed height for .spacer.
CSS
.anim {
position:relative;
width:75%;
margin:auto;
height:800px;
background:#FF0
}
.spacer {
position:absolute;
top:50%;
margin:-150px 0 0;
width:300px;
height:300px;
background:red
}
HTML
<div class="anim spacer">
<p>
Content
</p>
<p>
More content
</p>
</div>
This question already has answers here:
css background color with floating elements
(5 answers)
Closed 6 years ago.
This is my html:
<div class="header_wrapper">
<div class="main_nav">
<div>TEst</div>
<div>TEst</div>
<div>TEst</div>
</div>
<div class="clear"></div>
</div>
As you can see I want to build a menu with floating divs. Doing so the background of main_nav disappears.
.header_wrapper{
height:129px;
background:url('images/layout/header.png') no-repeat #1f1f1f;
border-bottom:1px solid #1f66ad
}
.header_wrapper .main_nav{
position:relative;
top:77px; left:336px;
width:750px;
background:red;
}
.header_wrapper .main_nav div{
float:left;
}
.clear{
clear:both;
}
I tried to use clear:both, however the background is still gone. Any ideas why?
Adding overflow:auto; to main_nav brings the background back.
This is because floated content does not take up any space. Your parent main_div division essentially takes on a height of 0 because it has no other content, which "hides" the background (there is no height to display behind).
This information is available in the css-floating tag wiki and I've also posted other more detailed information about floating and parent containers.
Put overflow on .main_nav
.header_wrapper .main_nav div{
float:left;
overflow: hidden;
}
Your clearing div forces its parent to expand, it has no effect on its sibling's background.
You have to clear to your float DIV's parent which is .main_nav. Write like this:
.header_wrapper .main_nav{
overflow:hidden;
}