I've been struggling to hover to work. All this should do is have a red container div and when you hover it, a black inner div drops down from the top to block the container. I must be doing something basic wrong here.
HTML:
<div class="container">
<div class="inner" />
</div>
CSS:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 0;
background: black;
transition: max-height 2s ease-out;
overflow: hidden;
}
.container:hover .inner {
max-height: 200px;
}
As mentioned by Temani Afif, this was nothing more than missing a height.
Related
How can I zoom an image that is inside an div on hover using CSS (zoom only the image, not the div).
See what I'm talking about here
Some minor modifications of #tim-klein answer to get effect from video
.container {
border: 1px solid black;
width: 100%;
height: 184px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
transition: all 2s ease-in-out;
}
.container:hover img {
transform: scale(2,2)
}
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</div>
You can accomplish the general idea by using the :hover pseudo-class. Note: I didn't go overboard with keeping the img centered or using a transition to mimic the slow zoom, however, you could easily add those features if desired.
.container {
border: 1px solid black;
width: 100%;
height: 184px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
}
.container:hover img {
width: 120%;
height: 120%;
}
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</div>
Couple of different ways to tackle this.
Demo: https://codepen.io/shanomurphy/pen/BvMrWq?editors=1100
1. Using background-image
HTML:
<div class="zoom-bg"></div>
CSS:
.zoom-bg {
width: 300px;
height: 200px;
overflow: hidden;
}
.zoom-bg:before {
content: '';
display: block;
width: 100%;
height: 100%;
background: url('https://placeimg.com/300/200/nature') no-repeat center;
background-size: cover;
transition: all .3s ease-in-out;
}
.zoom-bg:hover:before {
transform: scale(1.2);
}
2. Using nested image and object-fit
Basically the same as #Alx Lark's answer but adding object-fit to maintain the aspect ratio of the image.
HTML:
<div class="zoom-img">
<img src="https://placeimg.com/300/200/arch">
</div>
CSS:
.zoom-img {
width: 300px;
height: 200px;
overflow: hidden;
}
.zoom-img > img {
object-fit: cover;
width: 100%;
height: 100%;
transition: all .3s ease-in-out;
}
.zoom-img:hover > img {
transform: scale(1.2);
}
I found out an amzing case where the position: absolute element is hidden.
You can also see demo here.
.grand {
float: left;
overflow: hidden;
/* transform: scale(1,1); */
}
.parent {
width: 50px;
height: 50px;
background-color: gold;
overflow: hidden;
transform: rotate(0deg);
}
.child {
position: absolute;
top: 20px;
left: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
<div class="grand">
<div class="parent">
<div class="child"></div>
</div>
</div>
The issue is: .grand is set overflow: hidden and .parent is set transform: rotate(0deg), which make the child hidden. Normally, the .child with position: absolute; is not afftected by its parent elements not set position: relative. So what is the reason? Thank you very much!
Likely, it's the fact that .parent has a transform, which makes it the containing block for the absposed element the same way position: relative does.
I have one div with overflow: scroll and a lot of text. Then second div inside with position: absolute and 100% height and width. Is it possible to do, when you scroll down, inside div also moves down so it always covers whole visible view of outer div, with only css or I'll need to use javascript?
Here's an example in which you can see, that scrolling down, inside div is left at the top.
CSS:
.test1 {
position: relative;
height: 200px;
width: 500px;
overflow: scroll;
background: green;
}
.test2 {
position: absolute;
opacity: 0.5;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: red;
}
HTML:
<div class="test1">
<div class="test2"></div>
Lot of text
</div>
is this what you want? Demo
.test1 {
position: relative;
height: 200px;
width: 500px;
overflow: scroll;
background: green;
}
.test2 {
position: fixed;
opacity: 0.5;
height: 185px;
width: 485px;
background: red;
}
EDIT: All sorted now. Thanks to everyone that helped! :)
I am having trouble centering an element of my website. It is 3 divs mixed together to form a hexagon.
I cannot center it.
HTML:
<li>
<div class="centerhex">
<a href="#">
<div class="hexa">
<div class="hexcontainer">
<div class="vertical-align">
<span class="hextext">Lorem Ipsum Dolor</span>
</div>
</div>
</div>
</a>
</div>
</li>
CSS:
.centerhex {
left: 50%;
margin: 0 auto;
width:210px;
height:300px;
}
.hexa {
width: 100%;
min-width: 200px;
height: 0;
padding-bottom: 57.7%;
margin-top: 65px;
background-color: #4a4a4a;
/*position: absolute;*/
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 18px;
border-radius: 4%/20%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.hexa::before,
.hexa::after {
content:"";
display: block;
width: inherit;
height: inherit;
padding: inherit;
background: inherit;
z-index: 0;
position: absolute;
border-radius: inherit;
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
-ms-transform:rotate(60deg);
}
.hexa::after {
-moz-transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-o-transform:rotate(-60deg);
-ms-transform:rotate(-60deg);
}
.hexcontainer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.vertical-align {
display: table;
height: 100%;
width: 100%;
}
Also, I need help so the bottom of the shape isn't cut off.
URL: http://jackmarshallphotography.co.uk/V1/donate.html
There are few things to change in your css, I worked directly on your website with the chrome developer tool, please find below the css to center the "tag" :
.servicebox {
position: absolute;
margin-top: -77px;
width: 100%;
}
.servicebox ul {
list-style: none;
width: 100%;
text-align: center;
}
.servicebox ul li {
margin-left: 12px;
}
.centerhex {
margin: auto;
width: 210px;
height: 300px;
}
Hope it helps.
For the second issue :
you need to edit the file hexagon.css and change the margin-top property find the right value: -65px or more (line 47)
Yoann
Let me see if I can help you with a simple example.
Have a fiddle - fiddle link!
Edit! - Here is another fiddle without absolute positioning... seems like this can be achieved without it - fiddle link - no absolute positioning
Absolute positioning example:
HTML
<div id="parentOfCentered">
<div id="perfectlyCentered"></div>
</div>
CSS
#parentOfCentered {
position: relative; /* Absolutely positioned children will be positioned in relation to the parent div */
background: #CCC;
width: 400px;
height: 400px;
}
#perfectlyCentered {
width: 200px;
height: 200px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
/*
- negative top margin of half the height
- negative left margin of half the width
*/
}
This question already has answers here:
How to style the parent element when hovering a child element?
(8 answers)
Closed 9 years ago.
So I have 2 div's they're in each other so like this
<div class="parent">
<div class="child"></div>
</div>
and I want to change the background from .parent when I hover over .parent.
but I want the background to turn normal again when I hover over .child.
so for example: (or http://jsfiddle.net/k3Zdt/1/ )
.parent {
transition:background-color 1s;
width:100px;
height:100px;
background:#3D6AA2;
padding:50px;
}
.parent:hover {
background:#FFF;
}
.child {
height:100px;
width:100px;
background:#355E95;
transition:background-color 1s;
}
.child:hover {
background:#000;
}
<div class="parent">
<div class="child">
</div>
</div>
When I hover over the darkblue area I want the not-so-darkblue area to stay not-so-darkblue instead of changing to white.
I would like to keep this <div> structure. and I dont want a JavaScript solution (I know the JavaScript solution but I want to keep it pure CSS).
Basically you can't : How to style the parent element when hovering a child element?
But a trick is to use a sibling element :
http://jsfiddle.net/k3Zdt/8/
.parent {
width: 100px;
height: 100px;
padding: 50px;
}
.child {
height: 100px;
width: 100px;
background: #355E95;
transition: background-color 1s;
position: relative;
top: -200px;
}
.child:hover {
background: #000;
}
.sibling {
position: relative;
width: 100px;
height: 100px;
padding: 50px;
top: -50px;
left: -50px;
background: #3D6AA2;
transition: background-color 1s;
}
.sibling:hover {
background: #FFF;
}
<div class="parent">
<div class="sibling"></div>
<div class="child"></div>
</div>
You can trick something ;)
Basically, use a :before pseudo-element for the child div, with its same size;
when you hover on the child div, enlarge the :before pseudo-element to cover the father div area; this will cause the father div hover effect to fall down, and then to come back to the original state. A precise combination of z-index is involved too.
Demo: http://jsfiddle.net/gFu8h/ Dark Magic(tm)
.parent {
width: 100px;
height: 100px;
padding: 50px;
transition: background-color 1s;
background: #3D6AA2;
position: relative;
z-index: 1;
}
.parent:hover{
background: #FFF;
}
.child {
height: 100px;
width: 100px;
background: #355E95;
transition: background-color 1s;
position: relative;
}
.child:hover {
background: #000;
}
.child:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
transition: background-color 1s;
}
.child:hover:before{
top: -50px;
bottom: -50px;
left: -50px;
right: -50px;
background: #3D6AA2;
}
<div class="parent">
<div class="child"></div>
</div>