Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I want to use this: http://academyoftumblr.tumblr.com/post/6213339878/sliding-dropdown-menu dropdown menu on my tumblr page, but the code won't let me use capital letters. How do I fix this?
It's not HTML it's CSS where you've defined text-tranform property
Remove text-transform: Camelcase; from the code and it will work.
ul#drawers li h4 {margin: 0; padding: 0px; text-transform: Camelcase; font-size: 10px; text-align: center; background-color: #363835; background: rgba(255, 255, 255, 0.0); -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;}
The bolded part should be removed.
Remove the text-transform: Camelcase; statement that is changing the case of all its contents.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to use beautifull page navigation. When I downloaded below version:
http://codeb.it/resmenu/
I found file index.htm. In that file navigation is white. I tried use css style from orginal page (foundation.css) but this file have the same class like boostrap.
Please help me, I want to use this navigation (http://codeb.it/resmenu/) in black color.
I know, maybe it is easy question but please help me.
Thanks
Have you read all the documentation from the page you provided?
At the end of it, there is a snippet which shows you how to style the navigation bar:
.responsive_menu select {
display: block;
width: 100%;
height: 36px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: rgb(85, 85, 85);
vertical-align: middle;
background-color: rgb(255, 255, 255); /* This is black */
background-image: none;
border: none;
}
I edited my theme so the tags would show on the drop down box(?) at the bottom of the posts (that should be for the source as you can see on the original) but now it doesn't drop slowly like before, it appears instantly, i tried changing all the transition values but it doesn't work... Is there a way to fix it?
• my theme [ http://joltikillua.tumblr.com/ ]
• static preview of the original theme [ http://yukoki-th.tumblr.com/th29 ]
And another question, is there a way to add a "reblog" link on the side of the posts like on this one: [ 34kojin.tumblr.com/ ]? And maybe the option to add the permalink too?! like a small menu floating on the side?!
So my theme would have the tags on the drop down box and the links on the side of the post when on mouseover?
I hope this makes sense, I don't understand much about html/css and my english is bad but i would appreciate any help!
Hard to look through your code.
I've made a small example for you how to correctly make a your expanding box grow with pure CSS animation.
Here: http://jsfiddle.net/okwky7qL/
Please change order of -webkit-transition: ... and so on to the order like I have it here:
#permalink, .preblog {
font-family: bitxmap;
font-size: 10px;
color: {color:permalink text};
background-color: {color:permalink bg};
overflow: hidden;
padding: 0 10px;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
#permalink { line-height: 22px;}
.preblog {
padding: 0 0;
height: 22px;
}
{block:if1column}.posts:hover .preblog {height: 55px;}{/block:if1column}
Check your code in the CSS again with the code in my example.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I need a CSS hover effect for a png image without using two images. Bascially when a user hovers over the png image it would show a glow or other effect without highlighting the whole box but just the png image. I've tried using masking effect but that requires a second image and i have multiple object that don't have same shape and I want to use one css effect for all.
HTML
<div class="brighten pic">
<img src="imgs/bookcase-02.png">
</div>
CSS
/*DARKEN*/
.brighten img {
display: inline-block;
margin: 100px auto;
-webkit-filter: brightness(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.brighten img:hover {
-webkit-filter: brightness(120%);
}
Try This:
.brighten img {
opacity: 0.3;
}
.brighten img:hover {
opacity: 1;
}
You want to do something like this in JQuery. Be sure you are calling the JQuery library. I call mine from google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
THEN you want to do something like this:
<script type="text/javascript">
$(document).ready(function () {
$(".YourImageName").mouseenter(function () {
$(this).css('box-shadow', '0 0 2px #888');
});
$(".YourImageName").mouseleave(function () {
$(this).css('box-shadow', 'none');
});
}
</script>
This gives you a shadow around the edges and you can change the color or change the css entirely to better suit your needs.
It would be a little more helpful in the future if you provided us what code you currently have so we have a better understanding of what it is you want. This code is taken from live web use and changed to work for your scenario. You will have to change the class names to yours. Hope this helps!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
In this link,
There is a panel at the right hand side with class name .list-panel, the original width is 600px.
If you open the developer tools and change the width from 600px to ,say 900px and you will see there is a sliding effect. This is quite different from the normal behaviour.
How does it work actually? It looks like there is something monitoring the css style changes at all time and applies the changes with animation.
Thanks.
It's just your average transition, pretty cool:
.list-panel {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am new to html and css code, I am reading the source code of the http://www.quarryequipments.com/products/crusher/pe-jaw-crusher.html ,look at the facebook logo int the bottom if I put the mouse in it ,it will rotate slowly, how can I achieve that cool things?
Thanks.
Have a look here.
http://daneden.me/animate/
That site you refrenced was using
.end-public a:hover img {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
That's simple CSS:
.end_public a:hover img {
transform:rotate(45deg);
transition-duration:1s;
}