I'm working on my search toolbar for my website. Everything is running ok, except for the hide effect of the toolbar that has a weird behaviour. The transition works fine to display the writting bar, when I clock again in the search icon its suppose to hide the full bar, but instead hides only about half. If I click outside the search toolbar the bar hides correctly. Here is my code: Jsfiddle. And the relevant code:
#input {
position: absolute;
top: 0;
right: 30px;
width: 200px;
height: 30px;
z-index: 5;
overflow: hidden;}
#input input {
display: block;
position: absolute;
top: 0;
right: -200px;
width: 200px;
height: 100%;
margin: 0;
padding: 0 10px;
border: none;
background-color: #ededed;
color: #000;
font-size: 12px;
-webkit-backface-visibility: none;
-moz-backface-visibility: none;
-ms-backface-visibility: none;
backface-visibility: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: right 0;
-moz-transition: right 0;
-ms-transition: right 0;
-o-transition: right 0;
transition: right 0;}
#input input:focus {
outline: none;}
#input.focus {
z-index: 20;}
#input.focus input {
right: 0;
-webkit-transition: right 0.3s;
-moz-transition: right 0.3s;
-ms-transition: right 0.3s;
-o-transition: right 0.3s;
transition: right 0.3s;}
Thanks in advance!
Its seems the reason input box not hidding completely due to padding given for input element
.input input { padding: 0 10px;
The actual width is calculated by browser for input box is
width:200px + padding-left:10px + padding-right:10px = Actual width goes to 220px;
Solution for this is by adding
.input input { box-sizing:border-box;
property to input element class
Sample code can be seen here
.input {
position: absolute;
top: 0;
right: 30px;
width: 200px;
height: 30px;
line-height: 30px;
z-index: 5;
overflow: hidden;
border:1px solid #ccc;
background-color:#fff;
}
.input input {
box-sizing:border-box;
display: block;
position: absolute;
top: 0;
right: -200px;
width: 200px;
height: 100%;
margin: 0;
padding: 0 10px;
border: none;
background-color: #fff;
color: #000;
font-size: 12px;
-webkit-backface-visibility: none;
-moz-backface-visibility: none;
-ms-backface-visibility: none;
backface-visibility: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: right -200px;
-moz-transition: right -200px;
-ms-transition: right -200px;
-o-transition: right -200px;
transition: right -200px;
}
.input input:focus { outline: none; }
.input.focus { z-index: 20; }
.input:hover input{
right:0px;
-webkit-transition: right 0px 0.3s;
-moz-transition: right 0.3s;
-ms-transition: right 0.3s;
-o-transition: right 0.3s;
transition: right 0px 0.3s;
}
.input.focus input {
right:0px;
-webkit-transition: right 0px 0.3s;
-moz-transition: right 0.3s;
-ms-transition: right 0.3s;
-o-transition: right 0.3s;
transition: right 0px 0.3s;
}
body { font:13px 'arial'; }
https://jsfiddle.net/ShirishDhotre/9gqa2bum/
I added hover effect for demo you can remove class
.input:hover input{
Related
I wanting a header bar that slides vertically into view from negative top.
Rather than simply appears as if being behind a curtain.
The following is animated using height :-
https://jsfiddle.net/AaronNGray/kf0br46u/31/
HTML
<div id="box">
<div id="content">AaronNGray</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#box {
height: 100px;
width: auto;
background: transparent;
transition: all 0.4s ease-in-out;
}
#content {
overflow: hidden;
width: auto;
background: white;
height: 0px;
transition: all 0.4s ease-in-out;
border-bottom: 2px solid black;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
#box:hover > #content {
height: 50px;
top: 0px;
}
What I need is to be able to animate top so the content div slides downwards from off the top of the screen.
This is what I have tried but it does not work :-
https://jsfiddle.net/AaronNGray/kf0br46u/40/
body {
margin: 0px;
padding: 0px;
}
#box {
height: 100px;
top: -50px;
width: auto;
background: transparent;
transition: top 0.4s ease-in-out;
}
#content {
overflow: hidden;
width: auto;
background: white;
top: -50px;
height: 50px;
transition: top 0.4s ease-in-out;
border-bottom: 2px solid black;
-webkit-transition: top .8s ease;
-moz-transition: top .8s ease;
-ms-transition: top .8s ease;
-o-transition: top .8s ease;
}
#box:hover > #content {
top: 0px;
}
Hope you can help and its probably something simple I am missing, usually is :)
There are a couple of problems.
First, positioning with e.g. top does not work if the element's position is not defined (and if it is, the positioning is in relation to the first ancestor which itself is positioned).
Second, the box element is positioned at -50px (half its height) which is fine, but the content is put -50px which would put it at -100px (if it were positioned at all).
Here's a snippet with your code with these two things altered:
body {
margin: 0px;
padding: 0px;
position: relative;
}
#box {
height: 100px;
top: -50px;
width: auto;
transition: top 0.4s ease-in-out;
position: relative;
}
#content {
overflow: hidden;
position: relative;
top: 0px;
width: auto;
height: 50px;
transition: top 0.4s ease-in-out;
border-bottom: 2px solid black;
}
#box:hover #content {
top: 50px;
}
<div id="box">
<div id="content">AaronNGray</div>
</div>
StackOverflow has a monopoly on Google and the Internet and is abusing this by stopping people asking questions that they really need to ask in order to do their work. You may regard this question as stupid but theres no where else you cn get CSS answers anymore you have killed off all the other CSS forums !!!!!
I'm using this simple css code by Tiffany Ong to generate a lightbox effect for my images. It works fine until I click an image further down the page; when I close the lightbox below the fold it brings me back to the top of the page rather than where I left off. Could someone advise me on how to fix this? Code is pasted below.
/*Eliminates padding, centers the thumbnail */
body, html {
padding: 0;
margin: 0;
text-align: center;
}
/* Styles the thumbnail */
a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 94px 20px 20px 20px;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: inherit;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
I wrote some css codes but was told that I need to improve/optimize them, is there any idea? Thanks!
.box-popup {
opacity: 0;
position: absolute;
color: ‘#ccc’;
z-index: 1000;
top: -72px;
left: 165px;
width: 250px;
height: 200px;
background-color: ‘#ccc’;
padding: 30px 50px 40px 50px;
border-radius: 3px;
transition: opacity 400ms ease-in-out;
-moz-transition: opacity 400ms ease-in-out;
-webkit-transition: opacity 400ms ease-in-out;
}
Here is the reviewed code: (check the comments)
.box-popup {
opacity: 0;
position: absolute;
color: #ccc; /* removed quotes */
z-index: 1; /* try not to use higher z-index values unnecessarily */
top: -72px;
left: 165px;
width: 250px;
height: 200px;
background-color: #ccc; /* removed quotes or use currentColor if the color is same as of color property */
padding: 30px 50px 40px 50px;
border-radius: 3px;
transition: opacity .4s ease-in-out; /* used 'seconds' unit just to make it shorter */
-moz-transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
}
I have a picture that when you hover over it, a fading caption would appear
Here is the jfiddle
https://jsfiddle.net/e9dwbdyn/4/
I want it to look like this however:
I think it has to do with this part but I'm not sure how to exactly format it. Any advice/help would be appreciated. Thanks!
figcaption {
position: absolute;
top:35%;
width: 80%;
height:50%;
left:10%;
font-size: 14px;
color: white;
background-color: #9F8F53;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
Try this one https://jsfiddle.net/e9dwbdyn/6/
figure {
position: relative;
display: block;
margin: 5px 0 10px 0;
width:350px;
}
figcaption {
position: absolute;
top:30%;
width: 80%;
height:40%;
left:10%;
font-size: 20px;
font-family: "Arial, Helvetica, sans-serif";
text-align: center;
color: white;
background-color: #000;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
figure:hover figcaption {
opacity: 0.5;
}
.product-name a {
color: #fff;
}
.product-name a:hover {
color: #fff
}
.product-name, .desc_grid, .price {
padding: 0px;
margin: 0px;
}
}
You would still need to play around with some margins, text fonts and sizes to get the exact match.
you may use figcaption as flex container
https://jsfiddle.net/e9dwbdyn/5/
figure {
position: relative;
display: block;
margin: 5px 0 10px 0;
width:350px;
}
figcaption {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
display:flex;
font-size: 14px;
color: white;
}
figcaption>div {
background-color: #9F8F53;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
margin:auto;
text-align:center;
width:80%;
}
figure:hover figcaption div {
opacity: 0.7;
}
.product-name
<figure>
<img src="https://goodnessofgodministries.files.wordpress.com/2012/03/bugia_candlestick_.jpg" alt="Candlesticks" style="width:350px" />
</a>
<figcaption>
<div class="product-shop">
<h3 class="product-name">Candlesticks<span class="over"></span></h3>
<p class="desc_grid">lorem ipsum</p>
<div class="price-box">
<span class="regular-price" id="product-price-3-new">
<span class="price">$50.00</span></span>
</div>
</div>
</figcaption>
</figure>
When positioning elements absolutely it is always a good idea to incorporate a bit of flexibility. The issue with your code, is that you try to vertically center the element by estimating the top and left value in percentages, which isn't that flexible: What if the images inside the figure element have different sizes and aspect ratios? If so, these estimated percentages will not work in every instance and would potentially require you to manually change the value with each image.
In the example you present, it looks as if the height of the transitioned element is determined by its own content, rather than having set a specific height as in your code.
Example 1 (height determined by the content inside) works with browsers from IE9 and up:
figcaption {
position: absolute;
top: 50%; /* Always 50% from the top */
transform: translateY(-50%); /* Extracting half of the content height to vertically center */
width: 80%;
left: 0;
right: 0;
opacity: 0;
margin: 0 auto;
font-size: 14px;
padding: 1em;
color: white;
background: rgba(194, 145, 57, 0.7); /* Use semitransparent background instead of opacity for readability reasons */
transition: opacity .5s;
}
figure:hover figcaption {
opacity: 1;
}
Example 2 (fixed height) should work in all browsers:
figcaption {
position: absolute;
height: 50%; /* Fixed height */
width: 80%;
top: 0; /* Filling the whole space with top, left, bottom, right */
left: 0;
right: 0;
bottom: 0;
opacity: 0;
margin: auto; /* Using margin: auto; the space around is distributed evenly */
font-size: 14px;
padding: 1em;
color: white;
background: rgba(194, 145, 57, 0.7);
transition: opacity .5s;
}
In the not-too-distant future Flexbox has to be the preferred method, as it does all the calculations for you.
I have a border right applied to this div. It currently runs a line down the page, I want to keep that line but also implement an image to appear in that border right line half way down the page, here is my current css:
.aboutMenuArticle {
position: fixed;
cursor: pointer;
z-index: 999;
background-color: #ffffff;
height: 100%;
left: -27%;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
-ms-transition: -ms-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
border-right: 1px solid #e5e5e5;
}
Here is an image of how I need it to look:
Does anyone know how I could achieve this? Many thanks
I've done a quick fiddle where you absolutely position an after so it's sitting right in the middle. The negative value of right should be half the width of the image.
http://jsfiddle.net/n28r5/
div {
background: #CCC;
height: 200px;
width: 200px;
border-right: 1px solid #CCC;
padding: 20px;
background-clip:content-box;
position: relative;
}
div:after {
width: 20px;
height: 48px;
content: '';
display: block;
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
background: url(http://red-rockfinancial.com/images/info.jpg);
}