I want to make a box pack includes 5 below.
When leaving the mouse on a box, the box extend to whole main div and display of rest of the boxes set to none.
in this code, just box1's mouse hover well extend.
These are my codes.
.multibox{
width: 300px;
height: 300px;
border: 1px solid black;
overflow: hidden;
}
.multibox div{
position: absolute;
transition: width 0.5s, height 0.5s, -webkit-transform 0.5s;
-moz-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Firefox 4 */
-webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Safari and Chrome */
-o-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Opera */
-ms-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s; /* IE9 (maybe) */
}
.box1{
background: gray;
width: 250px;
height: 50px;
float: right;
display: block;
position: initial !important;
}
.box1:hover{
width: 300px;
height: 300px;
}
.box2{
background: blue;
width: 50px;
height: 250px;
float: left;
display: block;
position: initial !important;
}
.box2:hover{
width: 300px;
height: 300px;
}
.box3{
background: red;
width: 50px;
height: 250px;
display: block;
float: right;
position: initial !important;
}
.box3:hover{
width: 300px;
height: 300px;
}
.box4{
background: green;
width: 200px;
height: 200px;
display: block;
float: right;
position: initial !important;
}
.box4:hover{
width: 300px;
height: 300px;
}
.box5
{
background: brown;
width: 250px;
height: 50px;
display: block;
float: left;
position: initial !important;
}
.box5:hover{
width:300px;
height: 300px;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="multibox">
<div class="box1">
box 1
</div>
<div class="box2">
box 2
</div>
<div class="box3">
box 3
</div>
<div class="box4">
box 4
</div>
<div class="box5">
box 5
</div>
</div>
</body>
</html>
In which part have made a mistake?
Make all boxes position:absolute and place them properly.
.multibox{
width: 300px;
height: 300px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
.multibox div{
position: absolute;
transition: all 0.5s, height 0.5s, -webkit-transform 0.5s;
-moz-transition: all 0.5s, height 0.5s, -webkit-transform 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s, height 0.5s, -webkit-transform 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s, height 0.5s, -webkit-transform 0.5s; /* Opera */
-ms-transition: all 0.5s, height 0.5s, -webkit-transform 0.5s; /* IE9 (maybe) */
}
.multibox div:hover{
z-index: 99;
}
.box1{
background: gray;
width: 250px;
height: 50px;
right: 0;
top: 0;
display: block;
}
.box1:hover{
width: 300px;
height: 300px;
}
.box2{
background: blue;
width: 50px;
height: 250px;
float: left;
display: block;
}
.box2:hover{
width: 300px;
height: 300px;
}
.box3{
background: red;
width: 50px;
height: 250px;
display: block;
right: 0;
top: 50px;
}
.box3:hover{
width: 300px;
height: 300px;
top: 0;
}
.box4{
background: green;
width: 200px;
height: 200px;
display: block;
left: 50px;
top: 50px;
}
.box4:hover{
width: 300px;
height: 300px;
left: 0;
top: 0;
}
.box5
{
background: brown;
width: 250px;
height: 50px;
display: block;
left: 0;
bottom: 0;
}
.box5:hover{
width:300px;
height: 300px;
}
<div class="multibox">
<div class="box1">
box 1
</div>
<div class="box2">
box 2
</div>
<div class="box3">
box 3
</div>
<div class="box4">
box 4
</div>
<div class="box5">
box 5
</div>
</div>
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 4 years ago.
I'm trying to transition the opacity of 2 background images in 2 separate divs while hovering over a 3rd using HTML and CSS. Seems fairly straight forward but I have had no luck searching everything I can on hover targets including not:hover, parents siblings etc. Here is a link to my codepen example. My goal is to affect the opacity of box 1 & 2 by only hovering box 3 (blue box) and reverting back on hover out. All suggestions on restructuring and/or styling are welcome. Thanks.
https://codepen.io/NikoVanDam/pen/Ygzjpz
HTML
<body>
<div class="Container">
<div class="Box1"></div>
<div class="Filler1"></div>
<div class="Box2"></div>
<div class="Filler2"></div>
<div class="Box3"></div>
</div>
</body>
CSS
.Container {
width: 383px;
height: 404px;
background: yellow;
float: left;
}
.Box1 {
width: 383px;
height: 210px;
background: red;
float: left;
opacity: 0.2;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
}
.Filler1 {
width: 130px;
height: 194px;
background: grey;
float: left;
}
.Box2 {
width: 253px;
height: 110px;
background: blue;
float: left;
Opacity: 0.2;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
}
.Filler2 {
width: 160px;
height: 84px;
background: grey;
float: left;
}
.Box3 {
width: 93px;
height: 84px;
background: blue;
float: left;
}
Unfortunately, there's no pure CSS way to accomplish this as .Box3:hover comes after the elements you're wishing to target. Here's a straightforward JavaScript approach as a consolation prize.
const box3 = document.querySelector('.Box3');
const container = document.querySelector('.Container');
box3.addEventListener("mouseover", handleMouseOver);
box3.addEventListener("mouseout", handleMouseOut);
function handleMouseOver() {
container.classList.add('hover');
}
function handleMouseOut() {
container.classList.remove('hover');
}
.Container {
width: 383px;
height: 404px;
background: yellow;
float: left;
}
.Box1 {
width: 383px;
height: 210px;
background: red;
float: left;
opacity: 0.2;
transition: opacity 0.5s ease-in-out;
}
.Filler1 {
width: 130px;
height: 194px;
background: grey;
float: left;
}
.Box2 {
width: 253px;
height: 110px;
background: blue;
float: left;
Opacity: 0.2;
transition: opacity 0.5s ease-in-out;
}
.Filler2 {
width: 160px;
height: 84px;
background: grey;
float: left;
}
.Box3 {
width: 93px;
height: 84px;
background: blue;
float: left;
}
.hover .Box1,
.hover .Box2 {
opacity: .7;
}
<body>
<div class="Container">
<div class="Box1"></div>
<div class="Filler1"></div>
<div class="Box2"></div>
<div class="Filler2"></div>
<div class="Box3"></div>
</div>
</body>
You have to use javascript what you want, here a snippet,
(function() {
var container = document.querySelector('.Container');
var hoverBox = document.querySelector('.hover-box');
hoverBox.addEventListener('mouseover', function(){
container.classList.add('hovered');
});
hoverBox.addEventListener('mouseout', function(){
container.classList.remove('hovered');
});
})();
.Container {
width: 383px;
height: 404px;
background: yellow;
float: left;
}
.color-box {
float: left;
opacity: 0.2;
transition: opacity 0.5s ease-in-out;
}
.gray-box {
background: grey;
float: left;
}
.Box1 {
width: 383px;
height: 210px;
background: red;
}
.Filler1 {
width: 130px;
height: 194px;
}
.Box2 {
width: 253px;
height: 110px;
background: blue;
}
.Filler2 {
width: 160px;
height: 84px;
}
.Box3 {
width: 93px;
height: 84px;
background: blue;
float: left;
}
.hover-box {
cursor: pointer;
}
.hovered .color-box{
opacity: .7
}
<body>
<div class="Container">
<div class="Box1 color-box"></div>
<div class="Filler1 gray-box"></div>
<div class="Box2 color-box"></div>
<div class="Filler2 gray-box"></div>
<div class="Box3 hover-box"></div>
</div>
</body>
I have an absolutely positioned image inside a relatively positioned container.
Height of image is bigger than that of the container.
I want the image to scroll up to its end using only CSS.
The catch is that height of the image could vary, so it makes sense to make sure that bottom of the image is aligned with bottom of the container once hovered.
Following is the code:
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
bottom: 0;
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
Try transition on transform
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: transform 1s ease;
}
img:hover {
transform: translateY(-60%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
EDIT:
As the height is not set, I'd suggest a jQuery/js solution
$("img")
.mouseover(function() {
var offset = -$(this).height() + 200;
$(this).css("top", offset);
})
.mouseleave(function() {
$(this).css("top", 0);
});
body {
display: flex;
justify-content: space-around;
}
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: top 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Vertical-Banner-EN.jpg">
</div>
You need a way to position the element equivalent to bottom: 0px, but taken for the reference the top .
If you set top: 100%, the top of the element will be at the bottom of the parent.
Then, set a transform of 100%, and the bottom will be where the top was.
Notice that this solution works for any image and container height.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0%;
transform: translateY(0%);
transition: all 1s ease;
}
img:hover {
top: 100%;
transform: translateY(-100%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
You can have a transition between bottom: 0 and bottom: calc(100% - 18px), which is the height of the container minus the height of box2.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
}
.box2 {
position: absolute;
height: 18px;
bottom: calc(100% - 18px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.box:hover .box2 {
background-color: green;
bottom: 0;
}
<div class="box">
<div class="box2">
test
</div>
</div>
You can use this, try this with working snippet,
.box{
position:relative;
display:block;
height:200px;
width:200px;
background-color:red;
transition: all 1s ease;
}
.box2{
position: absolute;
transition: all 1s ease;
}
.box:hover .box2{
background-color:green;
margin-top: 180px;
}
<div class="box">
<div class="box2">
test
</div>
</div>
I've created a Slanted Div, however I ran into problem I cannot solve, I've googled this but did not find any answers.
body {
background: black;
}
#slantedwrapper {
overflow: hidden;
margin-left: 50px;
}
#slanted {
display: inline-block;
/* margin-right:-4px; */
width: 400px;
margin-left: -45px;
/* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
}
#slanted a {
position: relative;
background-color: #1d1d1d;
/* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
box-sizing: border-box;
background-size: cover;
/* padding:1em; */
display: block;
transform: skewX(-30deg);
width: 100%;
min-height: 3.5em;
text-align: center;
border-right: 5px solid #20c397;
height: 150px;
/* line-height: 110px; */
overflow: hidden;
}
#slanted span {
color: white;
position: absolute;
box-sizing: border-box;
transform: skewX(30deg);
left: 0;
width: 100%;
/* height: 150px; */
/* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
}
}
}
.current a {
background:#70cb00;
}
#slanted a img {
transform: skewX(30deg);
overflow: hidden;
margin-top: -20px;
padding-top: 0px;
width: 123%;
height: 123%;
margin-left: -50px;
opacity: 0.6;
-webkit-transition: opacity 0.3s linear 0s;
-o-transition: opacity 0.3s linear 0s;
transition: opacity 0.3s linear 0s;
}
#slanted img:hover {
opacity:1;
}
#caption {
background-color: #333333;
width: 100%;
height: 25px;
display: block;
position: absolute;
bottom: 0;
z-index: 99;
opacity: 0.7;
color: #D2D2D2;
-webkit-transition: background-color 0.3s linear 0s;
-o-transition: background-color 0.3s linear 0s;
transition: background-color 0.3s linear 0s;
}
/*Combination hover effects*/
#slanted:hover #caption {
background-color: #20c397;
opacity:1.0;
}
#slanted:hover img {
opacity:1.0;
}
/* END OFCombo hover effects*/
p.nonskew {
transform: skewX(30deg);
color: White;
margin: 0;
margin-left: 22%;
padding: 1.5%;
text-align: left;
font-size: 0.8em;
}
<div id="slantedwrapper">
<div id="slanted">
<a href="#">
<div id="caption">
<p class="nonskew">A Caption: Description</p>
</div>
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg" alt="SLANTED DIV"></a>
</div>
<!--end of wrapper-->
</div>
JSFiddle version
here's the problem:
Hover over the div, it hovers fine, but at the bottom right corner, where nothing is there (where the overflow is hidden) still hovers if you place your mouse over the blank area where the angle begins, how do I solve this into when it hovers- it only applies to shape of the div only?
Thank you
You seem to have the right idea, using both the unskew and intuitive to using the skew, however, something like the below example may work for you:
html {
background: radial-gradient(#222, blue);
height: 100%;
}
div.wrap{
height: 150px;
width: 300px; position: relative;
overflow: hidden;
}
div.innerwrap {
height: 100%;
width: 100%;
transform: skewX(-30deg);
position: absolute;top:0;left:0;
overflow: hidden;
margin-left: -70px;
transition: all 0.4s;
border-right: 5px solid tomato;
cursor:pointer;
}
div.innerwrap:hover span {
background: gold;
}
div.innerwrap:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/300/300);
transform: skewX(30deg);
transform-origin: top left;
}
div span {
position: absolute;
bottom: 0;
left: 0%;
width: 120%;
transform: skewX(30deg);
background: red;
text-align:center;
transition: all 0.4s;
}
<div class="wrap">
<div class="innerwrap">
<span>TITLE</span>
</div>
</div>
For further information, #Harry has created a wide variety of examples here in which you may find useful.
I'm having trouble using the ease function in CSS.
I have an image and when you hover over it I want it to ease to get bigger and show another div.
<div class="info1">
<img src="info.png">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
</div>
The CSS
.infoh {
width: 180px;
height: 180px;
display: none;
position: absolute;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
z-index: 1;
margin-left: -80px;
margin-top: -33px;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover .infoh {
display: block;
}
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
margin-left: 19.5%;
margin-top: -1.5%
}
I tried placing it on the image but that didn't work, then I tried on each div, and couldn't get it to ease. It just pops up.
.info1 img {
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
I'm not exactly sure of the effect you're after, but as #Paulie_D said, you're probably looking at using visibility and opacity.
Here's some code to try out, and at least that should give you something to work with.
(I also changed the order of your HTML a bit)
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
}
.info1 img {
width: 32px;
height: 32px;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
.infoh {
position: absolute;
visibility: hidden;
opacity: 0;
z-index: 1;
width: 180px;
height: 180px;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
-webkit-transition: all 1s; /*Safari*/
transition: all 1s;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover img {
width: 300px;
height: 300px;
}
.info1:hover .infoh {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 1s; /*Safari*/
transition-delay: 1s;
}
<div class="info1">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
<img src="https://unsplash.it/300/300">
</div>
Hope this helps, and good luck!
I am attempting to have 2 divs of the same size, one is initially visible while the other (below?) is initially hidden.
I desire that when you hover over the first div, the other will animate and slide upward to fully cover the first. This one should remain in place until you stop hovering over the area.
I can get a second div to move upward on hover, but it has many unwanted effects - such as a jumpy/jittery behaviour when the second div is in place - and in this fiddle, the lower one begins visible.
http://jsfiddle.net/cc28samh/1/
the HTML
<div>
<div id="stay-in-place">
<h1>hello world</h1>
<p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>
<div id="move-in-to-place">
<h2>I'm on top</h2>
</div>
</div>
the style
<style type="text/css"> #stay-in-place {
position:relative;
height : 200px;
width : 200px;
background: red;
-webkit-transition: height 1s, -webkit-transform 1s;
transition: height 1s, transform 1s;
}
#stay-in-place:hover {
height : 0px;
}
#move-in-to-place {
position:absolute;
height : 200px;
width : 200px;
background: blue;
}
</style>
This is what I think you want:
http://jsfiddle.net/8heq7w0b/
Better: http://jsfiddle.net/sdL1vead/
<div class="box">
<div id="stay-in-place">
<h1>hello world</h1>
<p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>
<div id="move-in-to-place">
<h2>I'm on top</h2>
</div>
</div>
CSS
#stay-in-place {
height: 100%;
width: 100%;
background: red;
position: absolute;
}
#move-in-to-place {
position: absolute;
bottom: -100%;
height : 100%;
width : 100%;
background: blue;
opacity:0;
}
.box {
position: relative;
width:200px;
height:200px;
overflow:hidden;
}
.box:hover #move-in-to-place {
bottom: 0;
-webkit-transition: all 1s, -webkit-transform 1s;
transition: all 1s, transform 1s;
width:100%;
height:100%;
opacity:1;
}
I made a improved version of http://jsfiddle.net/sdL1vead/ here http://jsfiddle.net/tongadall/trqj1qgo
html
<div class="box">
<div class="stay-in-place">
<h1>hello world</h1>
<p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>
<div class="move-in-to-place">
<span>I'm on top</span>
</div>
</div>
CSS
.stay-in-place {
height: 100%;
width: 100%;
background: red;
position: absolute;
}
.move-in-to-place {
position: absolute;
bottom: -100%;
height : 100%;
width : 100%;
padding: 8px;
background: rgba(255, 255, 255, 0.7);
opacity: 0;
font-size: 12px;
line-height: 1.2;
}
.box {
margin: 2px;
float: left;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.box:hover .move-in-to-place {
bottom: 0;
-webkit-transition: all 0.4s, -webkit-transform 0.4s;
transition: all 0.4s, transform 0.4s;
width: 100%;
height: auto;
opacity: 1;
}
.box:not(hover) .move-in-to-place {
bottom: -100%;
-webkit-transition: all 2s, -webkit-transform 2s;
transition: all 2s, transform 2s;
width: 100%;
height: 0;
opacity: 0;
}