I have a flex layout of items which mimics the look of a table. The idea is to show them all like this but when you hover the hovered item needs to expand in all 4 directions overlapping other items while staying centered. When the mouse leaves the item then it should collapse back to its original size. However, on both mouse enter and mouse leave the transition should be smooth. I got it to work with mouse in, but cannot figure out how to make it smooth on mouse out.
You will see in example below that the mouse out is not smooth because it loses its index value and without that index value I cannot get it to overlap. Is there another way to do this? Javascript solutions are also welcome but not preferred.
It seems when I paste the html/css into SO the hover doesn't work at all. At least on my browser so I'm leaving a js fiddle link where you can see my problem. Just note that when the mouse leaves the box it loses z-index value and thus the right side of that box goes behind the next box while the left side stays on top and transitions properly.
Here is JS Fiddle link: https://jsfiddle.net/1gr036k5/1/
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
max-width: 1000px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
padding: 0;
margin: 0;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.wrapper div {
width: 25%;
height: 200px;
background-color: red;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 0;
margin: 0;
box-sizing: border-box;
position: relative;
z-index: 2;
}
.wrapper.two div span {
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 4;
top: 0;
left: 0;
background-color: blue;
opacity: 0;
transition: all 1s ease;
}
.wrapper div:hover {
z-index: 3;
}
.wrapper div span:hover {
opacity: 100%;
width: 120%;
height: 120%;
left: -10%;
top: -10%;
}
<div class="wrapper">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
Is this you are looking for?
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
max-width: 1000px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper div {
width: 25%;
height: 200px;
background-color: red;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 0;
margin: 0;
box-sizing: border-box;
position:relative;
}
.wrapper div span {
display: block;
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
background-color: blue;
transition: all 1s ease;
opacity:0;
}
.wrapper div:hover {
}
.wrapper div:hover span{
transform: scale(2, 2);
opacity:1;
z-index:4;
}
<div class="wrapper">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
Related
i have a div with 7 children, on hover an item changes background and text pads left from center. I've done that with CSS.
now i want when the user clicks on an item it shows another div (.wrapper) with JavaScript. if the user click again it hides the particular div.
how can i achieve this logic with JavaScript?
here is my html snippet
<div class="category">
<div class="furniture">Furniture</div>
<div class="tableware">Tableware</div>
<div class="jewellery">Jewellery</div>
<div class="shoes">Shoes</div>
<div class="water_bottles">Water Bottles</div>
<div class="clothes">Clothes</div>
<div class="textiles">Fabric Patterns</div>
</div>
<div class="upload">
<div class="wrapper">
<div class="control"><img src="back.png"></div>
<div class="content"></div>
<div class="content_desc"></div>
<div class="control"><img src="forward.png"></div>
</div>
</div>
CSS code
/*styles individual divs in the category class*/
.category > div:hover {
cursor: pointer;
transform-style: flat;
animation-delay: 0.1s;
display: flex;
border: 1px 1px 1px 1px solid;
background-color: #898488;
color: #7AC4EE;
border-left-color: yellow;
box-sizing: border-box;
}
/*class that i want to display on click*/
.wrapper {
display: none;
flex-wrap: wrap;
justify-content: space-between;
background-color: white;
box-sizing: border-box;
width: 623px;
padding: 0;
align-self: center;
height: 100%;
margin-bottom: auto;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);
}
/*the classes below are in .wrapper*/
.control {
flex: 1;
background:white;
position: relative;
}
.content {
flex: 4;
height: 92%;
width: 415px;
margin-top: 5px;
margin-bottom: 5px;
background: lightblue;
position: relative;
}
.content_desc {
flex: 2;
height: 22px;
width: 415px;
margin-top: 370px ;
margin-left: 104px;
margin-right: 98.5px;
background-color: white;
border: 0.3px solid;
position: absolute;
}
.control img {
position: absolute;
left: 50%;
top: 50%;
height: 40px;
width: 40px;
background: white;
box-sizing: border-box;
transform: translate(-50%, -50%);
}
.control img:hover {
cursor: pointer;
background-color: yellow;
transition-delay: 0.2s;
animation: 0.1s ease-in;
}
JavaScript
$(document).ready(function() {
$('.category' > div ).on('click', function(){
$('.wrapper').show();
})
});
I am not sure about the term particular div here. May be you can try with toggle(). You also have syntax error in wrapping the selector:
$(document).ready(function() {
$('.category > div').on('click', function(){
$('.wrapper').toggle();
})
});
/*styles individual divs in the category class*/
.category > div:hover {
cursor: pointer;
transform-style: flat;
animation-delay: 0.1s;
display: flex;
border: 1px 1px 1px 1px solid;
background-color: #898488;
color: #7AC4EE;
border-left-color: yellow;
box-sizing: border-box;
}
/*class that i want to display on click*/
.wrapper {
display: none;
flex-wrap: wrap;
justify-content: space-between;
background-color: white;
box-sizing: border-box;
width: 623px;
padding: 0;
align-self: center;
height: 100%;
margin-bottom: auto;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);
}
/*the classes below are in .wrapper*/
.control {
flex: 1;
background:white;
position: relative;
}
.content {
flex: 4;
height: 92%;
width: 415px;
margin-top: 5px;
margin-bottom: 5px;
background: lightblue;
position: relative;
}
.content_desc {
flex: 2;
height: 22px;
width: 415px;
margin-top: 370px ;
margin-left: 104px;
margin-right: 98.5px;
background-color: white;
border: 0.3px solid;
position: absolute;
}
.control img {
position: absolute;
left: 50%;
top: 50%;
height: 40px;
width: 40px;
background: white;
box-sizing: border-box;
transform: translate(-50%, -50%);
}
.control img:hover {
cursor: pointer;
background-color: yellow;
transition-delay: 0.2s;
animation: 0.1s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category">
<div class="furniture">Furniture</div>
<div class="tableware">Tableware</div>
<div class="jewellery">Jewellery</div>
<div class="shoes">Shoes</div>
<div class="water_bottles">Water Bottles</div>
<div class="clothes">Clothes</div>
<div class="textiles">Fabric Patterns</div>
</div>
<div class="upload">
<div class="wrapper">
<div class="control"><img src="back.png"></div>
<div class="content"></div>
<div class="content_desc"></div>
<div class="control"><img src="forward.png"></div>
</div>
</div>
You made a mistake in your css selector, it's not '.category' > div, it should be '.category > div'
$(document).ready(function() {
$('.category > div').on('click', function(){
$('.wrapper').toggle();
})
});
use this code
$(document).ready(function() {
$('.category>div' ).on('click', function(){
$('.wrapper').toggle();
})
});
and add this css to hide div in starting
.wrapper{
display:none
}
My setup is the following
<div class=wrapper>
<div class=element />
</div>
Markup
.wrapper {
height: 40px;
width: 80px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 800px;
-webkit-transition: width 0.4s ease-in-out;
}
https://codepen.io/anon/pen/eLzGXY
Right now, when I click on the Icon, the Icon moves into the middle of the wrapper, as it transitions. I want it to stay in the left, on its original position. How would I do that?
You can achieve using set css property when mouse hover.
See, Below example.
.wrapper {
height: 40px;
width: 80px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 800px;
-webkit-transition: width 0.4s ease-in-out;
justify-content: left;
padding-left:35px;
}
<div class=wrapper>
<div class=element>
</div>
</div>
IMHO there are multiple ways to go about this -
If you are not averse to use positioning - you can set the element position as absolute and with some hacky left you can achieve what you want.
.element {
background-color: hotpink;
width: 10px;
position:absolute;
left:37px;
height: 10px;
}
https://codepen.io/anon/pen/OoXOPo#anon-login
Or we can use relative with some a justify-items:start on the parent container to place the element in its place always
https://codepen.io/anon/pen/eLzeZp
To keep the the square class element to the left, remove:
.wrapper {
justify-content:center;
}
and then margin the element like so:
.element {
margin-left:35px;
}
https://codepen.io/FEARtheMoose/pen/mGEqVL
My css transition doesn't work. I cannot figure out what the problem is. I am adding the class using JavaScript. The element is not changing display. Here is my code and the link to my codepen. I am trying to make a simple modal for a tic tac toe game. Thanks for any help!
.back {
margin-top: 200px;
}
.box {
display: inline-block;
vertical-align:top;
background: lightgray;
width: 120px;
height: 120px;
margin: 2px 0 2px 0;
border-radius: 20px;
}
h1 {
margin-top: 30px;
font-weight: bold;
font-size: 4em;
}
.popup {
font-family: 'Signika', 'sans-serif';
margin: 200px auto 0 auto;
width: 700px;
height: 270px;
background: skyblue;
border: 6px solid #8dadc3;
box-shadow: 0px 0px 300px 700px rgba(177, 217, 244, 0.9);
border-radius: 40px;
position: relative;
z-index: 1;
visibility: visible;
opacity: 1;
transition: all 5s;
}
.popup h4 {
padding-top: 60px;
font-weight: bold;
font-size: 3em;
left: 10%;
position: absolute;
}
.x {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 40%;
}
.o {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 50%;
}
.popup.hide {
opacity: 0;
visibility: hidden;
}
This is my JavaScript:
$(document).ready(function(){
var chosen;
$('.player').on("click", function(e){
if($(this).hasClass("x")){
console.log("X");
chosen = "X"
} else {
console.log("O");
chosen = "O";
}
$('.popup').addClass('hide');
});
});
link to codepen:
Direct link to code
The problem is you are using the CSS class hide and Bootstrap is set up to apply display: none !important; to that:
https://github.com/twbs/bootstrap/blob/v3.3.6/dist/css/bootstrap.css#L6528-L6530
Change the class name in both the CSS and JavaScript and it will work.
The only problem I've found in your example was typo in class name.
In your JavaScript your are adding .hiding class, but the class is called .hidi . After changing it to .hiding, everything seems to work.
I'm trying to make a tab float vertically in a page with dynamic generated content and overlap the right border the page content container with the left border of the floating div.
Here is a representation of what I'm trying to achieve:
In the following fiddle there's a basic skeleton of my page and an example of what is happening.
jsFiddle here
If I add position: absolute to this class the floating tab is correctly positioned but the page will not grow correctly as the content is appended nor will the footer be correctly positioned. On the other hand, if I remove the position absolute then the tab is not correctly positioned.
#page-content
{
border: 1px solid lightblue;
display: inline-block;
width: 180px;
padding: 10px;
min-height: 100px;
/*position: absolute;*/
}
How can I place the floating tab correctly overlapping the container border?
Notes: I cannot change much of the page structure (wrapping div and footer) but if needs be, the floating div can be appended after the #inner div.
Try this FIDDLE
Just add this rules to your .floating-tab:
margin-left: -1px;
z-index: 999;
float: left;
and float: left to your selector #page-content
Something like this:
#inner
{
text-align: left;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 200px;
position: relative; /* positoning context */
}
.floating-tab
{
position: absolute;
border-left: 1px solid #fff;
border-top: 1px solid lightblue;
border-right: 1px solid lightblue;
border-bottom: 1px solid lightblue;
width: 32px;
text-align: center;
top: 10px;
left:100%; /* fully left */
margin-left: 1px; /* width of border */
z-index:2;
}
$(function($) {
var element = $(".floating-tab"), originalY = element.offset().top, topMargin = 10;
$(window).on("scroll", function(event) {
var scrollTop = $(this).scrollTop();
element.stop(false, false).animate({ top: scrollTop < originalY ? topMargin : scrollTop - originalY + topMargin }, 300);
});
$("#B1").on("click", function() {
$("#innercontent").append("<p>text 1</p><p>text 2</p><p>text 3</p><p>text 4</p><p>text 5</p><p>text 6</p><p>text 7</p><p>text 8</p><p>text 9</p><p>text 10</p>");
});
});
.floating-tab
{
position: absolute;
border-left: 1px solid #fff;
border-top: 1px solid lightblue;
border-right: 1px solid lightblue;
border-bottom: 1px solid lightblue;
width: 32px;
text-align: center;
top: 10px;
left:100%;
margin-left: 1px;
z-index:2;
}
.floating-tab span
{
width: 24px;
height: 24px;
margin: 2px;
}
#page-content
{
border: 1px solid lightblue;
display: inline-block;
width: 180px;
padding: 10px;
min-height: 100px;
}
#inner
{
text-align: left;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 200px;
position: relative;
}
#outer
{
width: 100%;
padding-top: 10px;
display: block;
text-align: center;
}
#footer
{
margin-top: 17px;
background-color: lightblue;
border-top: 1px solid gray;
height: 48px;
}
#pagewrapper
{
min-height: 100%;
margin-bottom: -66px;
}
html, body, form
{
height:100%;
}
html
{
overflow: initial !important;
}
*, *::after, *::before
{
padding: 0px;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagewrapper">
<div id="outer">
<div id="inner">
<div id="page-content">
<input type="button" value="add content" id="B1" />
<div id="innercontent"></div>
</div>
<div class="floating-tab">
<span>A</span>
<span>B</span>
<span>C</span>
<div>
</div>
</div>
</div>
<div id="footer">FOOTER</div>
I have been created simple menu with single button from this link http://codepen.io/MrBambule/pen/jIseg
Now i want to reduce the size of the button,
So that i changed the code like this,
.button {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
.line {
background: #ccc;
width: 43px;
height: 7px;
margin: 5px auto;
}
.line__first {
margin-top: 9px;
}
index.js:
// function to trigger animation
$('.button').click(function() {
// check if the menu-items are hidden behind the button
if ($('.menu__list').hasClass('hidden')) {
// add class to make the menu-items drop down
$('.item1').addClass('list--animation');
// the following items trigger the animation after a certain delay
$('.item2').addClass('list--animation--delay1');
$('.item3').addClass('list--animation--delay2');
// remove the hidden class from the ul container to show that the items are not hidden anymore
$('.menu__list').removeClass('hidden');
}
else {
// remove class to make the menu-items disappear
$('.item1').removeClass('list--animation');
$('.item2').removeClass('list--animation--delay1');
$('.item3').removeClass('list--animation--delay2');
// add the hidden class to the ul container to show that the items are now hidden again
$('.menu__list').addClass('hidden');
}
});
So the button size reduced, but when i click the button, it shows the lists are not properly.
Can anybody help me, how to solve this one, thanks in advance.
Change your CSS as below.
Workin JSFIDDLE Here
CSS
.button {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
.line {
background: #ccc;
width: 15px;
height: 5px;
margin: 2px auto;
}
.line__first {
margin-top: 15px;
}
.menu {
z-index: 1;
float: left;
width: 100%;
}
.menu__list {
width: 100%;
margin-left:-110px;
margin-top:-10px;
}
/* Animation keyframes for the drop down */
#keyframes drop {
from {
top: 0px;
}
70% {
top: 85px;
animation-timing-function: ease-in;
}
to {
top: 70px;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes drop {
from {
top: 0px;
}
70% {
top: 85px;
-webkit-animation-timing-function: ease-in;
}
to {
top: 70px;
-webkit-animation-timing-function: ease-out;
}
}
li {
position: relative;
list-style: none;
padding-bottom: 0px;
top: 0px;
}
li a {
text-decoration: none;
color: grey;
text-align: center;
font-size: 0.7em;
font-family: 'Open Sans', sans-serif;
}
Working Demo Here
Update 1 : See the Updated Link here
Update 2: Working Demo with large font
.button {
margin: auto; //try this.
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}