Sliding box on mouse over - CSS - css

I'ld like to know if there is a better way to do this:
Also I don't think it will work smoothly in a responsive page so do you have any ideas to make it work without certain positionings like 'bottom:-45px;'.
I just wondered about this so this is not something that I'm going to use somewhere.
I know it could be done with jquery easily but I wonder if there is a chance to achieve this effect with pure CSS
.d1 {
width: 320px;
border: none;
padding: 10px;
margin: 10px 0px;position: relative;
}
.d2 {
width: 70%;
position: relative;
left: 0px;
right: 0px;
padding: 20px 0px;
margin: 10px 0px;
border: none;
}
.d3 {
width: 90%;position: relative;
left: 0px;
margin: 20px 0px;
padding: 20px 0px;
right: 0px;
border: none;
}
.d3 p, .d2 p, d1 p {
z-index:999;
position:relative;
}
.hov {
width: 40%;
padding: 20px 10px;
background-color: #300;
position:relative;
opacity:0;
bottom:-45px;left:0px;
z-index:0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.175, 1.285, 0.32, 1.275);
}
.d2 { pointer-events: none;}
.d3 { pointer-events: auto;}
.d2:hover .hov{
opacity:1;
bottom:-123px;
}
.d1:hover .hov{
opacity:1;
}
<div class="d1">
div1
<div class="d2">
<div class="hov" id="hov">
</div>
<p>
div2
</p>
<div class="d3">
<p>
div3</p>
</div>
</div>
</div>

Actually I think I managed to do it. In this case there are two elements so I placed them to top and bottom of the main container.
.d1 {
width: 320px;
padding: 10px;
margin: 10px;
position: relative;
cursor: default;
}
.d2 {
position: relative;
margin-top: -15px;
margin-bottom: 60px;
}
.d3 {
position: relative;
margin-bottom: -15px;
}
.d3 p,
.d2 p {
z-index: 999;
position: relative;
}
.hov {
width: 40%;
height: 40%;
background-color: #300;
position: absolute;
opacity: 0;
top: 0%;
left: 0px;
z-index: 0;
transition: all 0.3s cubic-bezier(0.175, 1.285, 0.32, 1.275);
}
.d3:hover+.hov {
top: 60%;
}
.d1:hover .hov {
opacity: 1;
}
<div class="d1">
<div class="d2">
<p> div2 </p>
</div>
<div class="d3">
<p> div3 </p>
</div>
<div class="hov"></div>
</div>

Generally, what you would call a 'certain positioning' would be required, but if you were to run it with a responsive page, the user, with a mobile phone, would have to click the area, before it moves, instead of hovering it. Using pure CSS would be a drag, because you have to literally loop over the codes all around.
My advice is, it's generally okay to use a specific number (i.e. -45px) as long as it's only for vertical measurements.

Related

Ignore margin for hover in CSS

I have made a little pop up when I hover over a square but I want to go to this popup even with an existing margin.
Here is a snippet with my HTML and CSS code:
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: solid lightgrey;
position: relative;
}
.frame {
height: 100%;
}
.st {
height: 250px;
}
.info {
visibility: hidden;
position: absolute;
top: 0;
left: 120%;
margin-left: -5px;
border-radius: 5px;
border: solid black 1px;
color: white;
}
.vertical:hover .info {
visibility: visible;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="frame"></div>
<div class="info">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="st"></div>
<div class="arrow"></div>
</div>
</div>
Here is an example (if you don't follow the arrow the popup will close):
https://jsfiddle.net/bpez64fr/
I want to ignore the margin and allow the user to go to the popup and make it work as if there was no margin
My strategy would be to put the element to be shown on hover at left:100% so that there's no gap for the cursor to "fall in". You can then use padding on this element to create the visual whitespace between the main element and the hover element, and put the element's content in an inner element .info-inner in my example. Note that .info-inner must be position:relative for the positioning of the .arrow to work.
Let me know if this works for you.
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: solid lightgrey;
position: relative;
}
.frame {
height: 100%;
}
.st {
height: 250px;
}
.info {
visibility: hidden;
position: absolute;
top: 0;
left: 100%;
padding-left: 10px;
}
.info-inner {
border-radius: 5px;
border: solid black 1px;
color: white;
position: relative;
}
.vertical:hover .info {
visibility: visible;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="frame"></div>
<div class="info">
<div class="info-inner">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="st"></div>
<div class="arrow"></div>
</div>
</div>
</div>
There are several ways to do this but here is one example.
It simple positions the element next to the previous one without a gap.
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: 3px solid lightgrey;
position: relative;
}
.infoWrap {
opacity: 0;
position: absolute;
top: -3px;
left: 100%;
padding: 0 10px;
transition: all ease-in-out 0.2s;
}
.info {
position: relative;
background: #eee;
border: solid #aaa 1px;
border-radius: 5px;
color: #666;
width: 100%;
min-height: 53px;
padding: 10px;
}
.vertical:hover .infoWrap {
opacity: 1;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #aaa transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="infoWrap">
<div class="info">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="arrow"></div>
</div>
</div>
</div>
You can use the css transitions property to delay the invisibility of the element.
Example:
.info{ transition: visibility 2s ease-out;}
Updated jsFiddle
In this latter example, I increased the distance to the pop-up to improve the demo:
UPDATED Updated jsFiddle
CSS transitions allow you to delay the advent/removal of a css modification to the DOM, giving the user time to slide the mouse from the box to the pop-up.
References:
https://css-tricks.com/almanac/properties/t/transition-delay/
https://www.w3schools.com/cssref/css3_pr_transition-delay.asp

how to make a custom popup container like youtube

I want make the popup windows like youtube share because its stick next to button. I tried bootstrap modal but it's popup in the middle of screen. When click youtube share button,pop up shows around button.
Does anyone know how to fix it?
HTML
<div class="box">
<a class="button" href="#popup1">share</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<div class="social-fuctions">
Share to facebook
</div>
</div>
</div>
</div>
css code
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
/*
.button {
font-size: 1em;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
*/HTMLHTML
.social-fuctions{
display: flex;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.2);
/* transition: opacity 100ms;*/
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
position: absolute;
bottom: -550px;
right: 5%;
left: 15%;
padding: 15px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Any suggestion? Thanks a lot
Set your box to position: relative and make the modal box / pop up a child of the box div. This way, the overlay will be positioned absolutely within the parameters of it's parent div.
.box {
position: relative;
}
.modal {
position: absolute;
}
Something like this:
https://jsfiddle.net/bommy8zu/5/
Moosetuin's approach is simple and effective.
But there is no need for a relative parent. And a absolute Modal.
I made two examples one is just like Youtube's ShareBox and the other will allways be centered.
How To Center:
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
Check it out here: https://codepen.io/Tibixx/pen/zWEpqq

How do I create this shape in CSS? (vertically align div)

How do I create this in css? I'm having trouble aligning the circle divs vertical middle.
See image:
Here what I've done: https://jsfiddle.net/5odbwkn5/
.gray-btn1 {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-left:-20px;
position: relative;
float:left;
}
.gray-btn {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-right: -20px;
position: relative;
float:right;
}
.gray-mid {
background-color: #5dd6e4;
text-align:center;
}
<div class="gray-mid">
<div class="gray-btn1"><span class="fa-connectdevelop">left</span>
</div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span>
</div>
<div style="height:100px">middle</div>
</div>
you can use pseudoelements as before and after to make easily that effect:
.container:before {
content:' ';
display:block;
height: 30px;
width:30px;
background-color:#999;
border-radius:15px;
position:absolute;
left:-15px;
top:7px;
}
.container:after {
content:' ';
display:block;
height: 30px;
width:30px;
background-color:#999;
border-radius:15px;
position:absolute;
right:-15px;
top:7px;
}
here is the FIDDLE I made for you as an example.
Edited: I updated the fiddle to be sure that the circles ("before" and "after") are positioned behind the container. And move slightly the elements to make it more simillar to your image.
First of all, you should not duplicate styles. Instead, extend common btn styles with specific for left button.
You can position buttons in the middle with the help of position: absolute relatively to the parent and top: 50%, margin-top: -25px fixes vertical offset in this case.
As the result it will become:
.gray-mid {
margin-left: 30px;
width: 400px;
background-color: #5dd6e4;
text-align:center;
position: relative;
}
.gray-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
right: -20px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.gray-left {
left: -20px;
right: inherit;
}
<div class="gray-mid">
<div class="gray-btn gray-left"><span class="fa-connectdevelop">left</span></div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span></div>
<div style="height:100px">middle</div>
</div>
Is this what you're looking for?
There are multiple ways which you can achieve vertical centering. There's even a really easy to follow guide posted by Chris Coyier here that you can reference whenever you need.
This is basically what I go to when I need to center something vertically.
.parent-with-centered-content {
position: relative;
}
.parent-with-centered-content > .child-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
You could use pseudo elements for this kind of functionality, and position them accordingly.
div {
position: relative;
display: inline-block;
height: 30px;
width: 200px;
background: gray;
margin: 30px;
text-align: center;
line-height: 30px;
}
div:before,
div:after {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background: gray;
top: 5px;
z-index: -1;
}
div:before {
left: -10px;
}
div:after {
right: -10px;
}
<div>This is some text</div>
I did not try to match your fonts, but using background image, and just a little css, here you go:
https://jsfiddle.net/z8z3h75h/
<div id="background">
<div class="left">
FACEBOOK
</div>
<div class="right">
become a fan
</div>
</div>
#background {
background-image:url(http://s28.postimg.org/loa285ugt/1_SEOh.jpg);
width:409px;
height:41px;
}
.left {
float:left;
margin-left:30px;
color:white;
margin-top:10px;
}
.right {
float:right;
margin-right:40px;
color:white;
margin-top:10px;
}
The correct way to do that is to set top: 50% and translate or set margin on :pseudo elements
:root{text-align: center;padding: 40px 0 0 0}
.container{
display: inline-block;
position: relative;
padding: 6px 10px
}
.container, .container:before, .container:after{
background: #a6a195;
}
.container:before, .container:after{
content: '';
position: absolute;
top: 50%;
margin-top: -10px; /** height/2 **/
width: 20px;
height: 20px;
border-radius: 50%
}
.container:before{left: -10px}/** width/2 **/
.container:after{right: -10px}
.container div{display: inline; color: white}
.container .txt1{margin-right: 20px}
.container .txt2{font-size: 12px}
<div class="container">
<div class="txt1">FACEBOOK</div>
<div class="txt2">Become a fan</div>
</div>

How to solve a div positioning issue

I have a test site here:
http://www.hugoproject.com/test.html
I'm trying to put a second row of the book icons beneath the first, but whatever I try doesn't work. The following code makes a single book icon appear:
<div class="project">
Arrow<span></span>
</div>
When I have two sets of the code, two icons appear, when there are three sets of the code three icons appear. But if I have four or more sets of the code still only three icons appear. I want for the extra sets of code to make icons beneath the first three.
Also at the moment when you resize the browser window this makes the icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.
Any ideas?
HTML
<div id="content">
<div id="home-projects-wrapper">
<h1 class="home">Hello! My name is Brandon</h1>
<div id="home-projects">
<div id="projects" class="circle">
<div class="project-group">
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#container {
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
position: absolute;
width: 100%;
height: 100%;
left: 0;
overflow-x: hidden;
}
#container.open {
left: 270px;
position: absolute;
width: 100%;
height: 100%;
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
overflow-x: hidden;
}
#content {
width: 80%;
max-width: 1170px;
margin: 7% auto;
position: relative;
font-size: 14px;
line-height: 22px;
color: #777777;
}
.page-template-page-templateshome-php #content {
width: auto;
margin: 0 auto;
position: static;
}
.single-post #content { width: 60% }
#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}
#projects { width: 100% }
.project-group {
width: 100%;
height: 100%;
position: absolute;
}
.project {
float: left;
text-align: center;
width: 33.3%;
height: 100%;
}
.project-link {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #adadad;
position: relative;
overflow: hidden;
display: inline-block;
width: 80%;
}
.circle .project-link,
.circle .project-link .hover {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
.project-link .hexagon-top {
content: '';
display: block;
position: absolute;
left: 0;
border-style: solid;
border-bottom-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hexagon-bottom {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-top-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hover {
position: absolute;
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #fff;
background: #ec6136;
text-decoration: none;
text-transform: uppercase;
display: block;
opacity: 0;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transitin: all .3s;
}
.project-link .hover-text {
display: block;
margin-top: 45%;
}
.project-link .hover-text:after {
content: '>';
font-family: 'icon';
font-size: 12px;
margin-left: 15px;
}
.project-link:hover > .hover { opacity: .9 }
It looks like in your css (style.css) you have this :
.project-group{
width: 100%;
height: 100%;
position: absolute;
}
Just switch absolute by relative and your second row will appear. Is it enough for you?
.project-group{
width: 100%;
height: 100%;
position: relative;
}
I would recommend removing height: 100% from the .project and .project-group classes in your stylesheet. My guess is that setting a 100% height on an element is interacting poorly with the overflow: hidden statement from #home-projects.
First of all you have to double the height of #projects and set the height of .project to 50%.
What do you mean by:
Also at the moment when you resize the browser window this makes the icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.

Solving a div positioning issue

I have a test site here:
http://www.hugoproject.com/test.html
I'm trying to put a second row of the book icons beneath the first, but whatever I try doesn't work. To clarify the situation, the following code makes a single book icon appear:
<div class="project">
Arrow<span></span>
</div>
When I have two sets of the code, two icons appear, when there are three sets of the code three icons appear. But if I have four or more sets of the code only three icons appear! I want for the extra sets of code to make icons beneath the first three.
Also at the moment when you resize the browser window this makes the top row of icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.
Any ideas?
HTML
<div id="content">
<div id="home-projects-wrapper">
<h1 class="home">Hello! My name is Brandon</h1>
<div id="home-projects">
<div id="projects" class="circle">
<div class="project-group">
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#container {
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
position: absolute;
width: 100%;
height: 100%;
left: 0;
overflow-x: hidden;
}
#container.open {
left: 270px;
position: absolute;
width: 100%;
height: 100%;
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
overflow-x: hidden;
}
#content {
width: 80%;
max-width: 1170px;
margin: 7% auto;
position: relative;
font-size: 14px;
line-height: 22px;
color: #777777;
}
.page-template-page-templateshome-php #content {
width: auto;
margin: 0 auto;
position: static;
}
.single-post #content {
width: 60%;
}
#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}
#projects {
width: 100%;
}
.project-group {
width: 100%;
height: 100%;
position: absolute;
}
.project {
float: left;
text-align: center;
width: 33.3%;
height:100%;
}
.project-link {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #adadad;
position: relative;
overflow: hidden;
display: inline-block;
width: 80%;
}
.circle .project-link, .circle .project-link .hover {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
.project-link .hexagon-top {
content: '';
display: block;
position: absolute;
left: 0;
border-style: solid;
border-bottom-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hexagon-bottom {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-top-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hover {
position: absolute;
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #fff;
background: #ec6136;
text-decoration: none;
text-transform: uppercase;
display: block;
opacity: 0;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transitin: all .3s;
}
.project-link .hover-text {
display: block;
margin-top: 45%;
}
.project-link .hover-text:after {
content: '>';
font-family: 'icon';
font-size: 12px;
margin-left: 15px;
}
.project-link:hover > .hover {
opacity: .9;
}
If you want to continue with what you have now, just remove position:absolute from .project-group
You need to define a height for your blocks, i.e.
.project {
float: left;
text-align: center;
width: 33.3%;
height: 290px;
}
.HS {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 100%;
height: 290px;
background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
background-position: 0px 0px;
background-size: 800%;
}
That will not completely solve your issue though. Maybe you want to use images inside the boxes instead of a background image/icon. You can also always calculate new dimensions with JavaScript/jQuery.
I would set up a div container for the books with a set width equal to the width of the books + margins.
Then set the book divs to "float: left;" and it should put 3 books per line.
If you want to keep the auto scaling you should do all this with percentages like you are currently doing.

Resources