I've played with following code to make softly and gently transtion effect when onclick. Toggle elements opens itself very fast and hard. I would like make it a bit softer. Actually I don't have any idea which class or ID or selector would make affect it.
Demo: jsfiddle
CSS:
.toggle-box + label:before {
background-color: #4F5150;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #FFFFFF;
content: "+";
display: block;
float: left;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-right: 5px;
text-align: center;
width: 20px;
}
You could change the following rules in this way:
.toggle-box + label + div {
max-height: 0;
margin-bottom: 10px;
transition: max-height 0.15s linear;
overflow: hidden;
}
.toggle-box:checked + label + div {
height: auto;
max-height: 1000px;
transition: max-height 3s linear;
}
Max-height needs to be setted to a value which your div will never reach.
Here is updated jsfiddle
Related
there I am trying to build a search bar in which if you hover over the search icon it should expand. But animating the width directly is not performant, so I decided to use transforms but it is not scaling the search bar properly.
Here are the screenshots.
when using normal width
image
When using transform
image
CSS code:
.searchBox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 8px;
}
.search-content {
font-size: 10px;
}
.search-input {
width: 0px;
background-color: transparent;
padding: 0.5rem;
padding-right: 2rem;
border-radius: 2rem;
border: none;
outline: none;
transition: 0.2s;
}
.searchBox:hover > .search-input {
/* width: 8rem; */
transition: scaleX(8rem);
padding: 0.5rem;
padding-right: 2rem;
background-color: rgb(240, 245, 248);
box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.2);
}
.searchSvg {
position: absolute;
right: 0.62rem;
transition: 0.3s;
display: grid;
place-items: center;
}
Here is the link of codesandbox
transform: scaleX(8rem) will not work, you should change it to a plain number without any unit.
Also, I don't think you should use transform: scale() on an input as it would make the text stretched out.
In this case, using the width property for the hover effect is not really affect the overall performance I think.
try this, works fine (just add to below of your css codes):
.search-input {
transition: width 1s;
}
.search-input:hover,.searchBox:hover .search-input{
width: 200px;
}
The nav buttons sit on top of the image title div. Both drop down on hover. When going to the next image, the nav buttons are at the correct location, but when you click on the previous, the whole nav screen shifts to the bottom right!
nav {
position: absolute;
width: 100%
height: 20px;
padding-bottom: 2px;
z-index: 1;
float: right;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background: black;
opacity: 0.4;
right: 1px;
}
.title {
position: absolute;
width: 85%;
height: 20px;
padding-bottom: 2px;
margin-top: -25px;
transition: margin-top 200ms ease-in;
background: black;
color: white;
opacity: 0.6;
}
.title-text {
float: left;
padding-left: 5px;
}
.slides:hover .title {
margin-top: 0px;
}
Here is link to a fiddle.
I fixed this part but code itself is clumsy
anyway still here is example : jsfiddle
first of all you forgot ";" in .nav { between height and width
secondly dont use position: absolute and float it exclude each other
try to connect similiar classes like your buttons
.btn-prev,
.btn-next{
color: black;
background:white;
border: 2px solid white;
margin: 0px 5px 0px 0px;
cursor: pointer;
padding: 0px 5px 0px 5px;
display: inline-block;
}
Quick explain, I set text-align on .nav element so buttons would be set on right side inside .nav and .btn-* for display: inline-block; (default
display: block; so it would behave similiar like text.
I'm trying to make a div in which the size of a font icon scales when hovering over an entire div, not just the specific icon. Something similar to: http://fortawesome.github.io/Font-Awesome/icons/ To clarify, hovering over a <li> item causes a the specific icon to scale, but not the rest. I know how to cause it to change size upon mouseover of the icon itself, but I need it to scale when hovering over the rest of the div.
I'm wondering if this is possible to do simply through CSS, no jQuery/javascript, maybe through some selectors I don't know too well? Thanks in advance.
Quickest example I could think of...
<h1><span>★</span>your text?</h1>
Something like this...
h1 {
display: inline-block;
vertical-align: middle;
font-size: 1rem;
line-height: 1.8em;
border: 1px solid red;
padding: 1em;
}
h1 span {
display: inline-block;
vertical-align: middle;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
Think about it from right to left:
h1:hover h1 span {
font-size: 3em;
}
"any span within an h1 , while h1: is hovered over -> do this... "
ROUND 2: this should spell it out.
HTML
<ul class="icon-list">
<li>
<a href="#">
<div class="your-icon">☃</div>
Some text that doesn't move.
</a>
</li>
</ul>
CSS
.icon-list {
list-style: none;
padding: 0;
}
.icon-list li a {
display: inline-block;
height: 2em;
line-height: 2em;
text-decoration: none;
padding: 0 .5em;
color: #111;
-webkit-border-radius: 1em;
border-radius: 1em;
}
.icon-list li a:hover {
background-color: rgba(255,0,0,.1);
}
.icon-list li a .your-icon {
display: inline-block;
float: left;
width: 32px;
height: 32px;
text-align: center;
}
.icon-list li a:hover .your-icon {
font-size: 28px;
}
If you want it to scale when hovering over the div, you just use the hover selector on the div itself. Add a class to the div like .font-hover then in your css:
.font-hover:hover {
font-size: 12px;
}
Obviously setting the font-size to whatever you want.
See this fiddle
CSS
div {
padding: 3px 5px;
}
div,span {
transition: font-size .7s;
}
span {
display: inline-block;
width: 45px;
vertical-align: middle;
}
div:hover span{
font-size: 23px;
}
HTML
<div><span>OK,</span> Let's get bigger.</div>
I don't understand why my menu is not centering. I tried everything from inline elements to margin: 0 auto; to align="center" and I can not get the menu to center. You can see it here http://jeremyspence.net78.net you have to scroll down all the way to see it, t only appears when it goes past the main menu. Here is some css
.scrollmenu {
display:none;
position: fixed;
top: 0;
text-align:center;
margin: 0px auto;
width: 1020px;
z-index: 10000;
padding:0;
}
.scrollmenu li{
width: 200px;
height: 75px;
overflow: hidden;
position: relative;
float:left;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.scrollmenu li:last-child{
margin-right: 0px;
}
.scrollmenu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #000;
position: relative;
}
.scroll-icon{
font-family: 'Symbols';
font-size: 60px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 80px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
}
.scroll-home{
font-size: 30px;
opacity: 0.8;
text-align: center;
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 30%;
}
.scrollmenu li:nth-child(2):hover{
background-color: #CEFECE;
}
.scrollmenu li:nth-child(3):hover{
background-color: #CEFEFE;
}
.scrollmenu li:nth-child(4):hover{
background-color: #CECEFE;
}
.scrollmenu li:last-child:hover{
background-color: #FECEFE;
}
Just add this on your <ul class="scrollmenu"></ul> :
left: 50%;
margin-left: -510px;
or :
left: 0;
right: 0;
Looks like you're centering a div? <div> is a block element, by default. They're centered by using margins. You were close -- you need to make both the left AND right margin auto. margin-left:auto;margin-right:auto;. That will center it inside its parent element, which needs to be 100% width (block elements will expand to maximum width of parent by default). If it's an inline element, you can use text-align:center; on its parent (parent still needs to be 100% width), and that will do the trick.
In the HTML for your link, it looks like you need to set the position:fixed in the div above the ul menu. It looks like you're setting both position:fixed and trying to center at the same time. Get the parent div positioned in the fixed location, and then its child ul should be able to be centered via margin-left: auto; margin-right: auto;.
Have you tried giving a width to the content div?
.content {
position: relative;
width: 1024px;
margin: 0 auto;
}
That seems to solve the issue in Chrome.
By setting position: fixed; without a size for the enclosing container, the menu uses the window border for the container, then with all the items floating left... well they all are on the left.
I am trying to make the hidden span fade in when you hover over the image. I can't make it transition.
.thumb {
margin-top: 10px;
margin-right: -3px;
}
.thumb span {
display: none;
}
.thumb:hover span {
display: block;
position: absolute;
padding: 55px 0 0 0;
text-decoration: none;
text-align: center;
background-color: #ff6600;
opacity: .8;
width: 300px;
height: 95px;
font-size: 17px;
font-family: Candara;
text-shadow: 2px 2px 2px #000;
transition-property: opacity, background-color;
transition-duration: 25s ease-in;
}
Whats wrong with my css?
".thumb:hover span" it says, your span tag has to be child to ".thumb" class tag. But you cant put "span into image tag'. Rather you can use jquery or else put ".thumb' class to the parent of span, so that the parent hover will trigger the effect you want. You can also have a common parent to both image and span.